Почему jQuery removeClass снова появляется при прокрутке?

Question

У меня есть 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");
}

Заранее спасибо.

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