添加类滚动过去锚格时，锚链接 - jQuery的(Add class to anchor link

我有一个具有其链接到页面的适当部分锚的页面。 我想知道如果任何人有链接被点击时，我如何可以切换类的锚链接的任何意见，并在窗口/页面滚动使用jQuery到合适的DIV？

例如，存在链接到3个部分3个锚点链接：

<ul>
  <li><a href="#section1">Section 1</li>
  <li><a href="#section2">Section 2</li>
  <li><a href="#section3">Section 3</li>
</ul>

然后有3个部分：

<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>

当页面滚动到的div的一个或一个锚点击类的锚链接会触发什么，我想完成的。 所以，如果单击#section 1锚或页面滚动到＃DIV SECTION1，一类将被添加到SECTION1锚链接。 如果第2节，然后＃第2节的链接会收到类和SECTION1链接将有类中删除等。

我想我可能需要一种方法来跟踪每个部分div的定位，并然后切换到适当的链路上的课，但我也不太清楚从哪里开始。

预先感谢任何帮助或建议。

Answer 1:

我建议找到每个部分的总高度。 我假设有在各段之间没有休息为好。 然后使用jQuery来确定窗口位置。 当窗口的位置打了一定值，使课堂开关。 希望这只能滚动来实现，所以当你点击一个链接，它会滚动和先前描述的功能可以运行并更改类你。

下面是一些伪代码

$(document).ready(function(){
    var section1Height = $('#section1').height();
    var section2Height = $('#section2').height();
    var section3Height = $('#section3').height();

    $(window).scroll(function() {
        var winTop = $(window).scrollTop();
        if(winTop >= section1Height && winTop <= section2Height){
            $('#section1').addClass("newClass").not().removeClass("newClass");
        } else if(winTop >= section2Height && winTop <= section3Height){
            $('#section2').addClass("newClass").not().removeClass("newClass");
        } else if(winTop >= section3Height){
            $('#section3').addClass("newClass").not().removeClass("newClass");
        }
    });
});

同样，这仅仅是一个简单的例子。 有了您的部分更多的细节，我可以给出一个更详细的解答。

文章来源: Add class to anchor link when scrolling past anchor div - jquery