滚动偏移更改菜单项类答案

【问题标题】：Scroll offset changing menu item class滚动偏移更改菜单项类
【发布时间】：2017-08-15 12:59:29
【问题描述】：

我在 Magento 中有一个页面，其中列出了所有类别和产品。在顶部，我有一个包含类别的菜单，并且您滚动的项目必须获得一个类，以便我可以更改颜色。

我现在有这个脚本：

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('ul.nf-category-menu li a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('ul.nf-category-menu li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

但是这个类正在从 div 到 div 的变化很快，我可以给一些偏移量以便稍后添加这个类吗？

更新：

当标题距顶部 150px 时，不会很快将“活动”类更改为，我想将类更改为距顶部 80px 左右。

问候，

【问题讨论】：

我假设您正在寻找延迟，那么您是否检查了 jQuery 中的 setTimeout 选项？
我已经更新了我的问题
没人知道吗？

标签： javascript jquery magento scroll

【解决方案1】：

我已经修好了，尝试了一些东西后很简单。它是这样完成的：

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('ul.nf-category-menu li a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top+243 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('ul.nf-category-menu li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

if (refElement.position().top 必须改为： if (refElement.position().top+243 其中 243 是偏移的像素数量。

【讨论】：