add Active position or class on scroll
Html :
<div class="title-list-nav">
<ul>
<li><a href="#test"></a></li>
<li><a href="#test1"></a></li>
<li><a href="#test2"></a></li>
<li><a href="#test3"></a></li>
</ul>
</div>
<div id="test">Hi<br><br><br><br><br><br><br></div>
<div id="test1">Hello<br><br><br><br><br><br><br></div>
<div id="test2">You<br><br><br><br><br><br><br></div>
<div id="test3">There?<br><br><br><br><br><br><br></div>
JQuery :
jQuery(window).scroll(function() {
var cur_pos = jQuery(this).scrollTop();
jQuery(".title-list-nav ul li").each(function(){
var ele_top = jQuery(jQuery(this).find("a").attr("href")).offset().top-jQuery("#header").height();
var ele_bot = jQuery(jQuery(this).find("a").attr("href")).offset().top + jQuery(jQuery(this).find("a").attr("href")).outerHeight(true)-jQuery("#header").height();
if(cur_pos>=ele_top && cur_pos<=ele_bot){
jQuery(this).addClass("active");
}else{
jQuery(this).removeClass("active");
}
});
});