$(window).scroll(function () {
var navPos = $('.header-wrapper').outerHeight();
/* ^^ Sticky Navigation Starting Position, navPos, is equal to the height of the element above it. OuterHeight gives us the padding and margin and everything */
if ($(window).scrollTop() <= navPos){
$('.navbar').removeClass('navbar-fixed-top');
}
/* ^^ If the scroll position is less than or equal to the Nav Starting Position, don't have the 'navbar-fixed-top' class to the element with the classname "navbar" */
if ($(window).scrollTop() > navPos) {
$('.navbar').addClass('navbar-fixed-top');
}
/*^^ If the scroll position is greater than the height of the starting nap position, the nav bar has reached the top of the screen, so add the class 'navbar-fixed-top'*/
});
Add a new class to an element with the class 'navbar', when it reaches the top of the screen.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.