Auto-Hide Sticky Header


Auto-hide sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.

Auto-hide means hiding the header automatically when a user starts scrolling down the page and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up. There are at least two manners of hiding a header: reactive and lazy.


The source of the demo consists of both pure-JavaScript (IE9+ compatible) and jQuery-dependent versions of the code. Feel free to investigate and use it.

Demo    Auto-Hide Sticky Header