Javascript 如何检测用户是否已从当前位置滚动100px

我有一个一页的网站，我在那里添加一个类，而用户点击导航。但是，如果用户已从当前位置滚动

100px

，则需要删除该类

---

注意：我已经阅读了stackoverflow的文章，比如和，因为没有共享相应的HTML标记，所以很难弄清楚到底是什么问题。试试下面的方法，如果有帮助，请告诉我

var scrollvalue = 0;
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
    scrollvalue = $(window).scrollTop();
    $(".copyright").addClass("activecopy");
});


$(window).scroll(function () {
    if (($(window).scrollTop() - scrollvalue) > 100) {
        $('.copyright').removeClass('activecopy');
    }
});

编辑：

正如我所说，很难看到发生了什么，因为您没有共享标记。这是一个样本。希望能有帮助

var scrollvalue = 0;
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
    scrollvalue = $(window).scrollTop();
    $(".copyright").addClass("activecopy");
});


$(window).scroll(function () {
    if (($(window).scrollTop() - scrollvalue) > 100) {
        $('.copyright').removeClass('activecopy');
    }
});

编辑2：

为了使其通用化，您可以将注册click侦听器和scroll侦听器的代码包装到一个函数中，该函数接受哪些元素作为参数进行操作。下面是示例

函数寄存器crolltrigger（锚定，目标）{
var$a=$（锚定）；
var$t=$（目标）；
$a.click（函数（）{
//获取单击时的滚动位置
var currentScroll=$（窗口）.scrollTop（）；
函数handleScroll（）{
//在屏幕上显示当前滚动的演示代码
$t.html（'Current Scroll:'+（$（window.scrollTop（）-currentScroll））；
//检查用户是否在单击标记后滚动了100px
如果（$（窗口）.scrollTop（）-currentScroll）>100）{
//从元素中删除活动类
$t.removeClass（“活动”）；
//演示代码ti表示滚动到100px已完成
$t.html（'Complete'）；
//停止侦听滚动事件[可选，但建议使用]
$（窗口）.off（'scroll'，handleScroll）；
}
}
//将活动类添加到元素[使其变为蓝色]
$t.addClass（“活动”）；
//侦听滚动事件并检查是否已通过100px
$（窗口）。滚动（把手滚动）；
});
}
registerScrollTrigger（“#a1”，“#scroll1”）；
registerScrollTrigger（'a2'，'scroll2'）
div.scroll{
边缘顶部：50px；
}
div.scroll.active{
背景：蓝色；
颜色：白色；
}
分区垫{
高度：1000px；
}
h4{
边缘底部：500px；
}

向下滚动按钮
点击我
单击上述按钮后开始滚动
向下滚动另一个按钮
也点击我
单击上述按钮后开始滚动

我用这个在底部显示我的gototop按钮。希望这对你有用….
你到底面临什么问题？粗略地看一眼，“删除”
$（“.copyright”）.remvoeClass（“activecopy”）中似乎有一个输入错误和行
$（scrollvalue）。scrollTop（）>100
可能应该是
$（窗口）。scrollTop（）>100
在我单击nav后，类立即被删除。它应该等到我滚动
100px
。谢谢，我已经更新了我的代码。你不也应该检查用户从记录的滚动位置（
scrollvalue
）相对于常量值
100
）的滚动量吗？是的，但是我如何检测相同的情况？你能分享你的HTML吗？（制作工作代码段的最低要求）此代码在从当前位置滚动100px后不会删除类。我已使用工作示例更新了我的代码，供您参考。您的代码看起来不错。但是这个id
#scroll
看起来是静态的。我可能有多个导航点。每次点击我都想从当前位置检测100px的滚动。我已经提供了ghpages的github链接。我已经编辑了我的代码，使其具有一个通用包装器，通过将任何与jQuery兼容的选择器或元素作为参数传递，可以在多个元素上多次调用该包装器
$(window).scroll(function() {
       var height = $(window).scrollTop();
       if (height > 100) {
            $(".copyright").addClass("activecopy");
       } else {
          $('.copyright').removeClass('activecopy');
       }


   });