<div class="container">
<div class="wrapper">
<div class="section" id="section1">section1</div>
<div class="section" id="section2">section2</div>
<div class="section" id="section3">section3</div>
<div class="section" id="section4">section4</div>
<div class="section" id="section5">section5</div>
</div>
<nav>
<a href="#section1" class="current">section1</a>
<a href="#section2">section2</a>
<a href="#section3">section3</a>
<a href="#section4">section4</a>
<a href="#section5">section5</a>
</nav>
</div>
<script>
var $navs = $('nav a');
var $sections = $('.section');
var $window = $(window);
var navLength = $navs.length - 1;
$window.on('scroll', function() {
scrollTop = $window.scrollTop();
for (var len = navLength; len > -1; len--) {
var that = $sections.eq(len);
if(scrollTop >= that.offset().top){
$navs.removeClass('current').eq(len).addClass('current');break;
}
}
})
</script>