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.
[gpp_button color=”blue” url=”http://osvaldas.info/examples/auto-hide-sticky-header/” title=”Sticky Header” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button] [gpp_button color=”blue” url=”http://osvaldas.info/auto-hide-sticky-header” title=”Sticky Header” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Auto-Hide Sticky Header[/gpp_button]
