如何根据活动锚点自动将类添加到链接?

时间:2015-02-23 19:22:54

标签: javascript jquery css

我左侧有一个侧边栏,例如:

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

右边的内容,如下:

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

单击侧边栏链接会跳转到锚点...没问题。我想要实现的是当它们进入顶部滚动位置时捕获这些锚点,以便我可以向适当的LI元素添加一个类。我想自动执行此操作,而无需指定每个元素。

例如,我找到了类似问题的答案:

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

类似的例子是bootstrap文档:http://bootstrapdocs.com/v3.1.1/docs/getting-started/

我查看了他们的词缀代码,但由于它与许多其他功能交织在一起,因此非常混乱。

有没有简单的方法来实现这一目标?不使用bootstrap.js

1 个答案:

答案 0 :(得分:1)

假设您已经在使用jQuery,您可以获取每个元素的.offset()并检查窗口顶部是否低于.offset()。不要在每个滚动上获得offset(),因为它是非常昂贵的操作。我建议在页面加载时执行此操作,如果可能,将值保存到数组,然后检查数组。如果您认为用户将调整窗口大小(这会影响偏移量),请在加载和调整大小时执行。这是一个例子:http://jsfiddle.net/qars0w0o/3/