js监听滚动到相应的div

<nav>
    <ul>
        <li><a href="#About">About</a></li>
        <li><a href="#Skill">Skill</a></li>
        <li><a href="#Experience">Experience</a></li>
        <li><a href="#More">More</a></li>
        <li><a href="#Contact">Contact</a></li>
    </ul>
</nav>

<div id = "About">
</div>
<div id = "Skill">
</div>
<div id = "AExperience">
</div>
<div id = "More">
</div>
<div id = "Contact">
</div>

 一、点击a跳转到相应的div

var a = $('a[href]', 'nav');
 a.click(function(){

    var href = $(this).attr('href');
    var o = $(href).offset();
    $(window).scrollTop(o.top, 1000); //增加个动画效果
});

二、页面滚动时候，给上述a添加一个 ative的样式

var a = $('a[href]', 'nav');
$(window).on('scroll', function() {
    a.removeClass('active');
    for(var i = 0; i < a.length; i++)
    {
        var $a = a.eq(i), st = $(window).scrollTop();
        var top = $a.offset().top;
        if (st >= top && st <= $a.height() + top) //  top >= st >= top + height
        {
           $a.addClass('active'); //此处已经获得了哪个a
            break;
        }
    }
        
});

 

 

来源：CSDN

作者：zj张静

链接：https://blog.csdn.net/zhangjing1019/article/details/83652812