Question

我的Javascript（jQuery）文件中具有以下代码：

jQuery(document).on('scroll', function() {
    var scrollTop = jQuery(document).scrollTop();
    console.log(scrollTop);
    if(scrollTop < 350) {
        jQuery('.header__top').removeClass('header-fixed');
        jQuery('.logo').css({position: "absolute", height: "auto"});
        jQuery('.logo img').css("height", "auto");
    }else {
        jQuery('.header__top').addClass('header-fixed');
        jQuery('.logo').css({position: "static", height: "85px"});
        jQuery('.logo img').css("height", "100%");
    }
});

当我在浏览器中滚动3次时，会发生奇怪的情况。函数触发多次（无限次）。然后，当我向上或向下滚动时，效果很好。为什么我的滚动功能会在特定位置导致无限执行？

Answer 1

scoll事件会多次触发-这是预期的行为。您应该使用油门/反跳（https://underscorejs.org/#throttle）函数来解决此问题。

来自MDN：

由于滚动事件可以很高的速度触发，因此事件处理程序不应该执行计算量大的操作，例如DOM 修改。相反，建议使用 requestAnimationFrame（），setTimeout（）或CustomEvent，如下所示。

Answer 2

我解决了我的问题，即使用display：flex和position：fixed在同一元素上。

jQuery scrollTop（）执行多次

2 个答案: