滚动过去锚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");
        }
    });
});

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