Sticky navigation on scroll

$(window).scroll(function (event) { var scroll = $(document).scrollTop(); var offset = 60; if (scroll > offset) { $("#main-nav").addClass("main-nav--sticky"); } else { $("#main-nav").removeClass("main-nav--sticky"); } });
Basic script to detect how many pixels have been scrolled and apply a CSS class to the navigation element.

1 Response

Here's the playground I made to illustrate the functionality:

Write a 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.