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

Oliver Götze

Verfasst am 24.03.2015

Update 15.04.2025

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.

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

javascript

				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

css

				nav.sticky {
	position:fixed;
}

4 Likes

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.