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

von  am  | 2 Kommentare | aktualisiert am  | 1904 mal gelesen

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 diesen 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:



Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst folgende HTML Tags und Attribute benutzen:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title=""data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title=""data-url=""> <span class="" title=""data-url="">

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.

Do NOT follow this link or you will be banned from the site!