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!

Amber Weinberg

Amber is a freelance front-end developer specializing in semantic and accessible custom WordPress themes. She works with agencies and other freelancers to bring their designs to life using custom ACF flexible layout builds - making them more performant and less buggy while allowing the client easy customization without breaking the design system.