时间戳

首页 > 解决方案 > 当滚动位置高于第一个锚链接时删除类

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

问题描述

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

+-------------------------------
| 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第一个菜单链接的类。

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

感谢您的任何建议。

标签： javascripthtmljquery

解决方案

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

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');

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

推荐阅读