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.

Tags: #Code, #CSS, #CSS3, #HTML, #HTML5, #Javascript, #jQuery, #Menu, #Navigation, #Tutorial, #Web Design, #Web Development