为什么jQuery removeClass重新出现在滚动条上?

问题描述 投票:0回答:1

我有一个带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");
}

提前感谢。

javascript jquery
1个回答
0
投票

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");
  }
});
© www.soinside.com 2019 - 2024. All rights reserved.