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

Question

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

我一直在兜圈子，我不明白为什么在反向滚动时“显示 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");
}

提前致谢。

Answer 1

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