jQuery scrollTop() 执行多次答案

【问题标题】：jQuery scrollTop() executes multiple timesjQuery scrollTop() 执行多次
【发布时间】：2018-12-17 20:58:20
【问题描述】：

我的 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 次时，会发生一些奇怪的事情。函数多次触发（无限）。然后当我向上或向下滚动时它工作正常。为什么我的滚动功能会导致在特定位置无限执行？

【问题讨论】：

这些“做某事”块中的一个或另一个中的代码很容易与问题有关。

标签： javascript jquery scrolltop

【解决方案1】：

scoll 事件多次触发 - 这是预期的行为。您应该使用油门/去抖动 (https://underscorejs.org/#throttle) 功能来解决这个问题。

来自 MDN：

由于滚动事件可以高速触发，因此事件处理程序不应该执行计算昂贵的操作，例如 DOM 修改。相反，建议使用限制事件 requestAnimationFrame()、setTimeout() 或 CustomEvent，如下所示。

【讨论】：

【解决方案2】：

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

【讨论】：