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('body').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;
}

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu jQuery sticky menu on Scroll – Menü beim scrollen oben anheften

Wenn dir der Beitrag jQuery sticky menu on Scroll – Menü beim scrollen oben anheften gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.