当滚动位置高于第一个锚链接时删除类答案

【问题标题】：Remove class when scroll position is above first anchor link当滚动位置高于第一个锚链接时删除类
【发布时间】：2021-01-20 14:30:03
【问题描述】：

我需要一些建议：我的网站上有第二个导航，一旦到达顶部导航的底部，它就会变得粘滞。第二个导航包含不同的锚链接。当点击一个锚链接时，页面会滚动到这个适当的部分，并用不同的颜色和下划线样式标记链接。像这样的：

+-------------------------------
| Navigation
+-------------------------------
| Second Navigation
+-------------------------------

Some content (different height)

+-------------------------------
| Anchor link 1
+-------------------------------

Some content (different height)

+-------------------------------
| Anchor link 2
+-------------------------------

...

这是我用来在第二个导航中突出显示（或添加样式的类）活动链接的脚本：


jQuery(function ($) {
    $(window).scroll(function () {
        var scrollPos = $(window).scrollTop();
        $('.secondary-nav-section').each(function (i) {
            var topPos = $(this).offset().top;
            if ((topPos - scrollPos) <= 182) {
                $('.secondary-nav-menu-item-active').removeClass('secondary-nav-menu-item-active')
                $('.secondary-nav-menu ul li').eq(i).addClass('secondary-nav-menu-item-active')
            }
        })
    });
});

现在问题来了：只要我向下滚动，然后在带有锚链接的不同 div 之间上下滚动，这段代码就可以正常工作。

但是，当我进一步向上滚动第一个带有锚链接的 div 时，我的脚本不会删除第一个菜单链接的 secondary-nav-menu-item-active 类。

我应该在我的脚本中添加什么代码，以便只有在滚动位置在第一个锚链接部分“内部”时才会突出显示第一个菜单项？

感谢您的建议。

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

与此同时，我找到了一个可行的解决方案。也许它也可以帮助其他人：

jQuery(function ($) {
    $(window).scroll(function () {
        var scrollPos = $(window).scrollTop();
        $('.secondary-nav-menu-item-active').removeClass('secondary-nav-menu-item-active');
        $('.secondary-nav-section').each(function (i) {
            var topPos = $(this).offset().top;
            if ((topPos - scrollPos) <= 182) {
                $('.secondary-nav-menu-item-active').removeClass('secondary-nav-menu-item-active');
                $('.secondary-nav-menu ul li').eq(i).addClass('secondary-nav-menu-item-active');
            }
        })
    });
});

所以，缺少的是这行代码：

$('.secondary-nav-menu-item-active').removeClass('secondary-nav-menu-item-active');

在添加类以突出显示活动的第二个菜单项之前。

【讨论】：