Question

我已经看过一些关于这个问题的话题。我添加了它们，更改为我的网站特定类等，但是我没有看到它正常工作。因此，希望你可以为我创建一个自定义函数。

我有this website而我正在寻找一种让每个菜单项根据网站上的滚动位置处于活动状态('.active')的方法。

我网站的摘要版

<nav id="topMenu">
  <ul class="right-side">
    <a href="#sectionA">Section A</a>
    <a href="#sectionB">Section B</a>
    <a href="#sectionC">SectionC</a>
  </ul>
</nav>

<section id="sectionA">
    content...
</section>

<section id="sectionA">
    content...
</section>

<section id="sectionA">
    content...
</section>

我不确定您是否需要有关我的页面HTML布局的更多信息，尽管您可以简单地打开页面并检查来源。

希望有人可以提供帮助！

Answer 1

这应该可行。我不记得为什么它有效..我建议你研究下面的代码并自己尝试一下。

$(window).scroll(function() {
    var currentPosition = $(this).scrollTop() + 55;
    links.removeClass('active');
    lis.removeClass('active');

    sections.each(function() {
        var top = $(this).offset().top,
            bottom = top + $(this).height() + 100;

        if (currentPosition >= top && currentPosition <= bottom) {
            var link = $('a[href="#' + this.id + '"]');
            link.addClass('active');
            link.parent().addClass('active');
        }
    });
});
});

在滚动时将活动状态添加到菜单项

1 个答案: