Smart (Auto-Hiding) Website Header & Footer using jQuery

There are plenty of reasons for using a sticky header navigation in your website. It provides easy access for top-priority links, plus a way back to the homepage from anywhere on the site. However problems may arise when you have a navigation bar which blocks some of the page content.

In this tutorial you’ll learn how you can build a locking header bar which will auto-hide itself after scrolling down the page. Also when scrolling to the very bottom you will display a small footer which includes many of the same nav links. This technique can be used in almost any website interface to improve readability and general user experience.