jQuery 切换类在滚动时被频繁调用答案

【问题标题】：jQuery toggle class gets called too often on scrolljQuery 切换类在滚动时被频繁调用
【发布时间】：2022-01-18 02:37:23
【问题描述】：

一旦用户滚动页面超过 100 像素，我正在尝试向我的粘性容器添加一个类，但它会滞后，并且无法控制切换类。

$(function () {

    $nav = $(".topmenu-container");
    $(document).scroll(function () {
        if ($(this).scrollTop() >= 100) {
            $nav.addClass('scrolled');
        } else {
            $nav.removeClass('scrolled');
        }

    });
});

这是我目前所拥有的。我有相同的函数，但没有 if 子句和 toggleClass 函数，但效果相同。

在这里，您会看到滚动时粘在顶部的容器，并且我想在用户从顶部滚动超过 100 像素时添加该类

编辑：我现在输出 scrollTop 值并看到，它似乎卡在应该发生切换的点上。它不断在 156px 和 87px 之间跳跃，这使得切换每秒发生多次。有人有想法吗？

【问题讨论】：

代码似乎工作正常：jsfiddle.net/RoryMcCrossan/q8v7g49o。你能更具体地谈谈这个问题吗？
代码应该可以正常工作。虽然根据我的经验，最好在 $(window) 上设置滚动侦听器。尝试使用 $(window).on('scroll', function(){}) 而不是 $(document).scroll(function () {})。
@RoryMcCrossan 是的，我无法滚动超过切换类的限制，即 100 像素。它一直在疯狂地切换。

标签： javascript html jquery css

【解决方案1】：

您需要为滚动事件速率限制。在您的情况下，我建议限制，这意味着您的滚动事件被限制为每秒或时间单位的特定数量。

另一种选择是使用去抖动，但这会导致事件在滚动结束时仅触发一次，这可能不是您的情况的最佳解决方案。

在此处阅读更多信息：Difference Between throttling and debouncing a function

漂亮的可视化：http://demo.nimius.net/debounce_throttle/

【讨论】：

【解决方案2】：

根据您的用例，您实际上可能会摆脱 CSS 中 position 属性的新粘性值： https://developer.mozilla.org/en-US/docs/Web/CSS/position

此外，您可以考虑使用 IntersectionObserver API，而不是使用去抖动和节流。 InteresectionObserver 的事件仅触发一次（取决于设置）并且肯定少于滚动，因为滚动一直触发，所以很难优化事件。看这里： https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

现在，如果元素内部有一些依赖于类的元素，例如...具有缩放动画的徽标等，您肯定必须使用 IntersectionObserver。看起来你的阈值是 100 像素，你绝对可以配置 Interesction Observer 来做到这一点。

您还可以查看 Wes Bos 的这个示例，该示例似乎在他的一门免费课程中： https://wesbos.com/javascript/06-serious-practice-exercises/scroll-events-and-intersection-observer

我希望您可以尝试这些解决方案，而不是过时的滚动。

【讨论】：