+ Antworten
Seite 1 von 4 1 2 3 4 LetzteLetzte
Ergebnis 1 bis 10 von 36

Thema: Topmenü beim scrollen oben fixieren

  1. #1
    Kommt häufiger vorbei Avatar von wolfstar
    Registriert seit
    28.04.2013
    Ort
    Braunschweig
    Beiträge
    275
    Bedankte sich
    35
    Erhielt 36 Danksagungen
    in 29 Beiträgen

    Standard Topmenü beim scrollen oben fixieren

    Hallo liebe Forumer,

    ich muss mich leider auch mal wieder mit einem Problem an euch wenden.
    Und zwar handelt es sich um diese Seite.

    Ich habe dort die Modulposition header und logo mittels css bereits übereinander gelegt bekommen.
    Code:
    header:
    
    position: relative;
    z-index: 0;
    margin-left: auto;
    margin-right: auto;
    top: -7px;
    width: auto;
    height: auto;
    
    
    logo:
    
    position: absolute;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    top: 2px;
    width: 100%;
    height: auto;
    Nun möchte ich das Topmenü (#nav1) so gestalten, dass es sich beim scrollen der Seite oben am Bildrand fixiert, sobald es diesen erreicht.
    Anhand verschiedener Anleitungen habe ich zumindest schon mal einen Teilerfolg erreicht, aber wie ihr auf der Seite sehen könnt passieren zwei Dinge:
    1. Der Menühintergrund wird plötzlich weitergescrollt, und nur der reine Menübereich bleibt am oberen Rand fixiert.
    2. Das Menü "flackert" beim scrollen. Nicht auf der Startseite, aber auf den anderen.

    In der index.php habe ich zwei verschiedene Möglichkeiten bereits ausprobiert.
    Diese:
    PHP-Code:
    <script type="text/javascript">
    (function ($)
    {
        $(
    document).ready( function()
        {
            $(
    window).scroll( function()
            {
                if ( $(
    window).scrollTop() > 370)
                {
                   $(
    "#nav1").css("position","fixed");
                   $(
    "#nav1").css("top","2px");
                }
                else if ( $(
    window).scrollTop() < 370)
                {
                   $(
    "#nav1").css("position","relative");
                   $(
    "#nav1").css("top","0px");
                }
            });
        });
    })(
    jQuery);
    </script> 
    Und diese:
    PHP-Code:
    <script type="text/javascript">
    (function ($)
    {
        $(
    document).ready( function()
        {
            $(
    window).scroll( function()
            {
              var 
    top = $("#nav1").offset().top;
                if ( $(
    window).scrollTop() > top)
                {
                   $(
    "#nav1").css("position","fixed");
                   $(
    "#nav1").css("top","2px");
                }
                else if ( $(
    window).scrollTop() < 370)
                {
                   $(
    "#nav1").css("position","relative");
                   $(
    "#nav1").css("top","0px");
                }
            });
        });
    })(
    jQuery);
    </script> 
    Die erstgenannte funktioniert insofern besser, dass diese nicht flackert. Dafür hat sie den Nachteil, dass hier eine fixe Pixelangabe erforderlich ist, bis das Menü am oberen Bildrand fixiert bleibt. Da ich aber vorhabe auf den anderen Seiten kleinere Header einzubauen, ist dies ungünstig.

    Bei der zweiten Variante funktioniert das zwar headerunabhängig, dafür erscheint dieses flackern.

    Bei beiden Varianten wird jedoch nicht das komplette Menü fixiert, der leere Bereich rechts von den Buttons verschwindet im Nirgendwo :-(

    Vielleicht könnt ihr mir ein wenig auf die Sprünge helfen?

    Vielen Dank im Voraus,
    VG,
    Wolfgang
    Geändert von wolfstar (01.12.2013 um 01:18 Uhr)

  2. #2
    Kommt häufiger vorbei Avatar von wolfstar
    Registriert seit
    28.04.2013
    Ort
    Braunschweig
    Beiträge
    275
    Bedankte sich
    35
    Erhielt 36 Danksagungen
    in 29 Beiträgen

    Standard

    Hallo nochmal, und einen schönen Sonntag allerseits :-)

    Also, über 50 mal gelesen, aber leider noch keinen Lösungsvorschlag...
    Hab ich einen Fehler bei der Fragestellung gemacht?
    Oder ist die Lösung vllt. doch gar nicht so einfach...?

    @ FINWICK:
    Ich hatte ein wenig auf dich gehofft, da du in einem anderen Beitrag ja einen Teil meiner bereits umgesetzten Lösung vorgeschlagen hattest... nur leider mit den genannten Fehlern.

    Freue mich weiterhin über Antworten,
    VG, Wolfgang

  3. #3
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    6.283
    Bedankte sich
    144
    Erhielt 2.365 Danksagungen
    in 2.223 Beiträgen

    Standard

    Ach ja, ab und zu muss ich auch arbeiten

    PHP-Code:
    <script type="text/javascript">
    (function ($)
    {
        $(
    document).ready( function()
        {
            var 
    top = $("#nav1").offset().top
            $(
    window).scroll( function()
            {
                if ( $(
    window).scrollTop() > top)
                {
                   $(
    "#nav1").css("position","fixed");
                   $(
    "#nav1").css("top","2px");
                }
                else if ( $(
    window).scrollTop() < top)
                {
                   $(
    "#nav1").css("position","relative");
                   $(
    "#nav1").css("top","0px");
                }
            });
        });
    })(
    jQuery);
    </script> 
    Müsste so gehen, habe es jetzt aber nicht getestet.

    Füge in der CSS auch noch zu
    Code:
    #nav1 {
        width: 100%;
    }
    Damit die Breite bei fix erhalten bleibt.
    Geändert von FINWICK (24.11.2013 um 12:47 Uhr)
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Suport via PN

  4. #4
    Kommt häufiger vorbei Avatar von wolfstar
    Registriert seit
    28.04.2013
    Ort
    Braunschweig
    Beiträge
    275
    Bedankte sich
    35
    Erhielt 36 Danksagungen
    in 29 Beiträgen

    Standard

    Hallo FINWICK,

    ich wollte nicht drängeln, hatte mich nur gewundert dass absolut noch gar keine Reaktion erfolgt ist.
    Und ich hatte die dumme Befürchtung dass aufgrund meines Templates, welches ich ja mit dem Template Creator erstellt habe, keiner helfen kann... wie es bei den Artisteer Templates der Fall ist ;-)

    Ich habe deinen Code mal eingebaut, und das zweite Problem ist gelöst, es flackert nichts mehr :-)

    ABER, jetzt passt auf der Startseite die Position nicht mehr, ab welcher das Menü mitscrollt.... es verschwindet zu früh.
    Auf allen anderen Seiten passt es jedoch.

    Auch der Zusatz in der css mit 100% Breite funktioniert noch nicht....

    Für weitere Vorschläge wäre ich sehr dankbar :-)

    Schönen Abend noch :-)

  5. #5
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    6.283
    Bedankte sich
    144
    Erhielt 2.365 Danksagungen
    in 2.223 Beiträgen

    Standard

    Drängeln kannst du hier keinen

    Ersetze mal die Zeile
    PHP-Code:
    var top = $("#nav1").offset().top
    gegen
    PHP-Code:
    var top = $("#header").height(); 
    Beziehen wir uns auf die Höhe des Headers das sollte besser gehen.

    in der template.css sehe ich die breite für #nav1 nicht, ans Ende der Datei einfügen. Ggf. mit !imporant hinter dem Wert. Der Generator funkt an vielen Stelle dazwischen.

    Code:
    #nav1 {
        width: 100%;
        z-index: 10000;
    }
    füge auch noch zur Sicherheit den Z-Index hinzu.
    Geändert von FINWICK (24.11.2013 um 18:27 Uhr)
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Suport via PN

  6. #6
    Kommt häufiger vorbei Avatar von wolfstar
    Registriert seit
    28.04.2013
    Ort
    Braunschweig
    Beiträge
    275
    Bedankte sich
    35
    Erhielt 36 Danksagungen
    in 29 Beiträgen

    Standard

    OK,
    den Teil in der index.php habe ich ersetzt, dies ändert leider nicht viel.
    Ich vermute, dadurch dass ich dem Header eine min-height von 180px gegeben habe, dass sich der Wert geholt wird, unabhängig vom Inhalt des Headers.

    In Zeile 393 der css war der Wert für die Breite angegeben, das hab ich direkt im css Zusatzfeld des Creators für das #nav1 eingetragen.
    Was ich nicht erwähnt habe, das hatte ich bereits probiert, das Ergebnis ist, dass der Menühintergrund nun deutlich übers Ziel hinausschiesst :-(
    Eine feste Pixelangabe würde zwar funktionieren, aber dann ist das Template nicht mehr responsive. Und das soll es ja bleiben...

  7. #7
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    6.283
    Bedankte sich
    144
    Erhielt 2.365 Danksagungen
    in 2.223 Beiträgen

    Standard

    Du musst das Script umplazieren, das diese Script vor dem Slider steht und dieser die Höhe verändert.
    Am besten das Script ans Ende (vor </body>) stellen. Dann hat es auch die richtigen Werte.

    Vor dem Slider ist das Div nur 180px hoch und dieses merk sich das Script, aber nach dem der Slider initialisiert wurde ist es höher.
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Suport via PN

  8. #8
    Kommt häufiger vorbei Avatar von wolfstar
    Registriert seit
    28.04.2013
    Ort
    Braunschweig
    Beiträge
    275
    Bedankte sich
    35
    Erhielt 36 Danksagungen
    in 29 Beiträgen

    Standard

    Gesagt, getan...
    Das Script steht jetzt ganz am Ende, direkt vor dem </body>
    Doch leider exakt das gleiche Ergebnis...

  9. #9
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    6.283
    Bedankte sich
    144
    Erhielt 2.365 Danksagungen
    in 2.223 Beiträgen

    Standard

    Ändere mal die Funktion so wie ich es unten gemacht habe, da müssen wir #header auf Veränderungen hin überwachen.

    PHP-Code:
    <script type="text/javascript">
    (function ($)
    {
        $(
    document).ready( function()
        {
            var 
    top = $("#header").height();

            $( 
    "#header" ).change(function() {
                  
    top = $("#header").height();
            });
            $(
    window).scroll( function()
            {
                if ( $(
    window).scrollTop() > top)
                {
                   $(
    "#nav1").css("position","fixed");
                   $(
    "#nav1").css("top","2px");
                }
                else if ( $(
    window).scrollTop() < top)
                {
                   $(
    "#nav1").css("position","relative");
                   $(
    "#nav1").css("top","0px");
                }
            });
        });
    })(
    jQuery);
    </script> 
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Suport via PN

  10. #10
    Kommt häufiger vorbei Avatar von wolfstar
    Registriert seit
    28.04.2013
    Ort
    Braunschweig
    Beiträge
    275
    Bedankte sich
    35
    Erhielt 36 Danksagungen
    in 29 Beiträgen

    Standard

    Nein, das ist es leider auch nicht, unverändert :-(
    Ich möchte dir trotzdem schon mal danken, dass du dich des Problems annimmst :-)

    Aber ich muss nochmal nachfragen...
    Die Funktion mit der ordnungsgemäßen Höhe war ja mit meinem ursprünglichen Code gegeben, bis auf das flackern.
    Das hast du mit deinem Codezusatz ja auch wegbekommen.
    Ist es vielleicht nur eine Frage der Anordnung (Reihenfolge) der Codes??

    Na ja, und das mit der Breite passt halt auch nicht mit den 100%.
    Ich befürchte, dass es gar nicht das Modul #nav1 ist.
    Kannst du mir hierzu bitte auch nochmal weiter helfen??
    Geändert von wolfstar (24.11.2013 um 19:44 Uhr)

+ Antworten
Seite 1 von 4 1 2 3 4 LetzteLetzte

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein