Javascript 如何基于活动锚点自动向链接添加类？

我在左边有一个侧边栏，比如：

<ul>
  <li><a href="#anchor1">Anchor 1</a></li>
  <li><a href="#anchor2">Anchor 2</a></li>
   ....
</ul>

类似的例子是引导文档：

我查看了它们的词缀代码，但由于它与大量其他函数交织在一起，所以非常混乱

---

有没有一个简单的方法来实现这一点？不使用bootstrap.js

假设您已经在使用jQuery，您可以获得每个元素的

.offset（）

，并检查窗口顶部是否低于该

.offset（）

。不要在每个滚动上获取

offset（）

，因为这是一个非常昂贵的操作。我建议在页面加载时执行此操作，如果可能的话，将值保存到数组中，然后检查数组。如果您认为用户将调整窗口大小，这将影响偏移，请在加载和调整大小时进行调整。这里有一个例子：

这太棒了。非常感谢。我所做的唯一改变是循环遍历菜单中找到的任何锚点，并将它们自动推送到数组中，而不标识每个锚点。谢谢你的帮助！

<h1 class="anchor-elem" id="anchor1">Anchor 1</h1>
<h1 class="anchor-elem" id="anchor2">Anchor 2</h1>

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

$(window).scroll(function() {
  if .anchor-elem is in view ->
    find it's relative link on the menu and add class "active" to it
});