滚动浏览锚点div时，将类添加到锚点链接 – jquery

我有一个页面，其中包含链接到页面相应部分的锚点。 我想知道是否有人对如何在点击链接时切换锚链接的类以及窗口/页面使用jQuery滚动到适当的div时有任何建议？

例如，有3个锚链接链接到3个部分：

 
Section 1
 
Section 2
 
Section 3
  

然后有3个部分：

我想要实现的是当页面滚动到其中一个div或单击一个锚点时，锚点链接的类将切换。 因此，如果单击#section 1锚点或页面滚动到＃section1 div，则会将一个类添加到section1锚点链接。 如果是第2节，那么＃section2链接将接收该类，而section1链接将删除该类，依此类推。

我想我可能需要一种方法来跟踪每个部分div的位置，然后在适当的链接上切换类，但我不太确定从哪里开始。

在此先感谢您的任何帮助或建议。

Answer 1

我建议找到每个部分的总高度。 我假设每个部分之间也没有中断。 然后使用jQuery确定窗口位置。 当窗口位置达到某个值时，进行类切换。 希望这只能通过滚动来完成，因此当您单击链接时，它将滚动并且之前描述的function可以运行并为您更改类。

这是一些伪代码

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

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