Mit jQuery:
Code:
(function($){
$(document).ready(function(){
$(".mod_navigation").wrap( "<div id='nav_wrapper'></div>" );
var myNav = $(".mod_navigation").offset().top;
var myElement = $("#nav_wrapper");
$(window).scroll(function(){
if( $(window).scrollTop() > myNav ) {
myElement.addClass("stick small");
}
else {
myElement.removeClass("stick small");
}
});
})
})(jQuery);
Das Script erstellt einen zusätzlichen Block um die Navigation und fügt diesem dann Klassen hinzu bzw. entfernt die Klassen wieder.
Diese können dann mit CSS bel. angesprochen werden z.B: .stick { position: fixed; } ...
Oder man nutzt Plugins ala Waypoint.js ( mit Sticky Elements ): http://imakewebthings.com/waypoints/
Lesezeichen