javascript - 为什么jQuery removeClass重新出现在滚动条上？

我有一个带有2个徽标的div，在滚动时，第一个徽标隐藏，第二个使用类显示。反向滚动时，第二个徽标应隐藏并且第一个重新出现。当我到达页面顶部时，第一个重新出现，但是第二个隐藏然后重新出现。

我一直在转转，我不明白为什么在反向滚动时“ show-logo”类重新出现。谁能解释为什么？

JS：

if ($(window).width() > 640){
  var scrollTop = $(window).scrollTop();
  var header    = $(".site-header");

  if (scrollTop > 50) {
    header.addClass("scrolling");
    setTimeout(function() {
      header.addClass("show-logo");
    }, 500);
  }
  else {
    header.removeClass("show-logo scrolling");
  };
} else {
  header.removeClass("show-logo scrolling");
}

提前致谢。

最佳答案

setTimeout不知道它不应该运行，因此它可以运行。因此，如果您不希望它执行，则需要取消它。两种不同的方式取决于您要发生的事情。

var myTimer = null;
var header = $(".site-header");
var win = $(window);
win.on("scroll", function() {
  if (myTimer) {
    window.clearTimeout(myTimer)
  }
  if ($(win.width() > 640) {
    var scrollTop = win.scrollTop();
    if (scrollTop > 50) {
      header.addClass("scrolling");
      myTimer = setTimeout(function() {
        header.addClass("show-logo");
      }, 500);
    } else {
       header.removeClass("show-logo scrolling");
    }
  } else {
    header.removeClass("show-logo scrolling");
  }
});

要么

var myTimer = null;
var header = $(".site-header");
var win = $(window);
win.on("scroll", function() {
  if ($(win.width() > 640) {
    var scrollTop = win.scrollTop();
    if (scrollTop > 50) {
      header.addClass("scrolling");
      if (!myTimer) {
        myTimer = setTimeout(function() {
          header.addClass("show-logo");
        }, 500);
      }
    } else {
       header.removeClass("show-logo scrolling");
       if (myTimer) {
         window.clearTimeout(myTimer)
         myTimer = null
       }
    }
  } else {
    header.removeClass("show-logo scrolling");
  }
});

关于javascript - 为什么jQuery removeClass重新出现在滚动条上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58698493/