Javascript jQuery scrollTop（）执行多次

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

jQuery（document）.on（'scroll'，function（）{
var scrollTop=jQuery（document.scrollTop（）；
控制台日志（scrollTop）；
如果（滚动顶部<350）{
jQuery（'.header\uu top'）.removeClass（'header-fixed'）；
jQuery（'.logo'）.css（{位置：“绝对”，高度：“自动”}）；
jQuery（'.logo img'）.css（“高度”、“自动”）；
}否则{
jQuery（'.header\uu top'）.addClass（'header-fixed'）；
jQuery（'.logo'）.css（{位置：“静态”，高度：“85px”}）；
jQuery（'.logo img'）.css（“高度”，“100%”）；
}
});

---

当我在浏览器中滚动3次时，奇怪的事情发生了。函数激发多次（无限）。然后，当我向上或向下滚动时，它工作正常。为什么我的scroll函数会在特定位置导致无限执行？

事件会多次触发

scoll

这是预期的行为。您应该使用throttle/debounce（）函数来解决这个问题

来自MDN：

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

---

scoll

事件多次激发-这是预期的行为。您应该使用throttle/debounce（）函数来解决这个问题

来自MDN：

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

---

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

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

在一个或另一个“do something”块中编写代码很容易与问题有关。在一个或另一个“do something”块中编写代码积木很容易与问题有关。

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%");
    }
});