当滚动通过锚点div时，将类添加到锚点链接 - jquery

Question

我有一个页面，锚点链接到页面的适当部分。我想知道是否有人有任何建议，当我点击链接时，如何切换锚链接的类，以及当窗口/页面使用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锚点或页面滚动到＃section1 div，则类将添加到section1锚点链接。如果第2节，则＃section2链接将接收该类，并且第1节链接将删除该类，等等。

我想我可能需要一种方法来跟踪每个部分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"); 
     } 
    }); 
}); 

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