Nice jQuery Walking Navigation
On a single page website with fixed position navigation, it will be nice to tell user on what section they are reading at. In this tutorial I am going to share how to create a walking navigation, on the other words, auto focus navigation based on user scrolling, by taking advantage of both jQuery and CSS animation.
We can estimate which section the users are reading at by checking their current scroll position and get closest section from it. This mean we have to separate each section by element that we can identify as a different section. To make us ease on creating an auto focus on the navigation related to the section user reading at, we can put the same identity on section and navigation, respectively.
Building The Page
The single page we want to create consists of navigation and section. Each of them has five items, home, about, blog, contact, credits. Home on navigation related to home on section, so on. Each item on navigation identified using href attribut which is the same value as section that identified by id attribute.
<div id="header-wrapper"> <div class="wrapper"> <span class="title">Walking Navigation</span> <ul class="navigation"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#credits">Credits</a></li> </ul></div> </div> <div id="content-wrapper"> <div id="home" class="section"> content </div> <div id="about" class="section"> content </div> <div id="blog" class="section"> content </div> <div id="contact"> content </div> <div id="credits" class="section"> content </div> </div>
You might also like
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu