sticky nav

$(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.