Add Active position or class on menu on scroll

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");
        }
    });
});

• Tweet
• Share
• Share
• Share
• Share