Allgemeine Informationen zu Elektronik, Platinen, Programmierung, PCs und mehr...

von   am   | 2 Kommentare | aktualisiert am  | 2233 mal gelesen
21 mal als PDF heruntergeladen

jQuery - Feststehendes Menü

   no image

feststehendes Menü mit offset().top

Beim scrollen bleibt das Menü oben stehen

Bei langen Seiten ist es manchmal von Vorteil, wenn das Menü immer erreichbar ist und beim Scrollen an einer bestimmten Stelle stehen bleibt. Mit diesem jQuery-Code wird erreicht, dass beim Scrollen das Menü oben stehen bleibt wenn es bei TOP 0 angekommen ist.
Mit der Funktion ‘offset().top’ wird die aktuelle Position des Menüs mit der ‘id custommenu’ in Pixeln von oben ermittelt und in der Variabel ‘top’ gespeichert.
Wenn dann beim Scrollen das Menü die Position 0 erreicht, wird das CSS-Attribut ‘position: fixed; top: 0px’ hinzugefügt und das Menü bleibt stehen. Wenn die Position nicht 0 ist, dann wird das css-Attribut entfernt und das Menü scrollt mit.
Mit verschiedenen Angaben für das CSS-Attribut kann die Position des dann feststehenden Menüs bestimmt werden.

Feststehendes Menü mit jQuery:

Und hier das Beispiel für das Menü:

 

Noch ein wenig schöner ist das feststehende Menü hier zu sehen:
Babycenter Schweiz
 



Bewerte den Artikel, wenn du magst:
[Gesamt: 30 Durchschnitt: 4.8/5]

2 Kommentare

  1. Domberg

    Are you a wizard? :-O Ja cool, jetzt muss ich nicht mehr danach suchen Grüzias, Domberg

    Bewerte diesen Kommentar, wenn du magst:
    [Gesamt: 21    Durchschnitt: 4.6/5]
    • Harry Milatz

      Jap bin ich dann wohl :D

      Bewerte diesen Kommentar, wenn du magst:
      [Gesamt: 19    Durchschnitt: 4.8/5]

Kommentar verfassen

Du kannst auch mit einem deiner folgenden Profile kommentieren*:


* Zustimmung zur Datenschutzerklärung
Dieses Kommentarformular speichert Name, E-Mailadresse und Inhalt, sowie die IP-Adresse für maximal 60 Tage. Für detaillierte Informationen lies bitte unsere Datenschutzerklärung.
*

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert. - HTML ist erlaubt.Du kannst folgende HTML Tags und Attribute benutzen:
<a href="" title=""> <abbr title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strong> <pre style="" class="" title="" data-url=""> <span style="" class="" title="" data-url=""> .

Top
green

BILDSCHIRM OFF.
SPAREN ON!

Ein dunkler Monitor verbraucht im Gegensatz zu einem hellen bis zu 20% weniger Strom.
Daher spare ich jetzt Energie für dich.

Harrys Welt