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.
The Trick
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>
