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:
1 2 3 4 5 6 7 8 9 10 11 12 | <script> jQuery(document).ready(function() { var top = jQuery('#custommenu').offset().top; jQuery(window).scroll(function() { if(jQuery(this).scrollTop() > top) { jQuery('#custommenu').attr('style','position: fixed; top: 0px; width:950px;'); } else { jQuery('#custommenu').removeAttr('style'); } }); }); </script> |
Und hier das Beispiel für das Menü:
Noch ein wenig schöner ist das feststehende Menü hier zu sehen:
Babycenter Schweiz
Are you a wizard? :-O Ja cool, jetzt muss ich nicht mehr danach suchen Grüzias, Domberg
Jap bin ich dann wohl :D