I had to write a quick little script for sticking my header to the top of the viewport after the user scrolled past it in the document. It was originally about 200px down the document, and then as soon as it hit the top of the viewport, it sticks permanently. It’s quite an easy thing to do:
$(window).scroll(function() { var header = $(document).scrollTop(); if (header > 568 ) { // Change this number to the amount you want to scroll before the header sticks $('header').addClass('sticky'); } else { $('header').removeClass('sticky'); } }); |
The rest is just a bit of CSS
header.sticky { margin: 0; position: fixed; top: 0; z-index: 100; } |
Too easy!
