jQuery sticky menu on Scroll – Menü beim scrollen oben anheften

Den Header oder das Menü beim scrollen am oberen Bildschirmrand anheften ist mit dem kleinen Javascript kein Problem. Dieses verwandelt dein Header nämlich ab einer bestimmten Position in einen sticky-Header oder sticky Menü, indem es dem Header die class="sticky" anhängt.

So funktioniert das jQuery sticky Menü

1. Kopiere den folgenden Code in den Footer deiner Webseite. Du kannst natürlich nav auch in div.menu oder jede andere Klasse umbenennen!

jQuery(function() {
	var sticky_navigation_offset_top = jQuery('nav').offset().top;
	var sticky_navigation = function(){
		var scroll_top = jQuery(window).scrollTop();
		if (scroll_top > sticky_navigation_offset_top) { 
			jQuery('nav').addClass('sticky');
		} else {
			jQuery('nav').removeClass('sticky');
		}   
	};
	sticky_navigation();
	jQuery(window).scroll(function() {
		 sticky_navigation();
	});
	jQuery('a[href="#"]').click(function(event){ 
		event.preventDefault(); 
	});	
});

2. Füge die folgenden Styles deiner .css Datei hinzu

nav.sticky {
	position:fixed;
}

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.