jQuery, .removeClass не работает

Question

У меня есть простая небольшая функция, которая добавляет/удаляет классы из элемента на основе положения и направления прокрутки.

Все работало нормально, пока я не добавил задержку при добавлении класса scrolled. Теперь окончательный .removeClass('scrolled'), похоже, перестает работать.

Есть ли у кого-нибудь идеи, почему это может быть?

Это мой код;

$(function() { 

var position = $(window).scrollTop(), 
    $burger = $('.navToggle'); 

$(window).scroll(function() { 

    if ( $(document).scrollTop() >= 125){ 

     var scroll = $(window).scrollTop(); 

     $burger.delay(325).queue(function(next){ 
      $(this).addClass('scrolled'); 
      next(); 
     }); 

     if (scroll > position) { 

      $burger.removeClass('going-up up-top').addClass('going-down'); 
      console.log('moving DOWN the page'); 

     } else { 

      $burger.removeClass('going-down').addClass('going-up'); 
      console.log('moving UP the page'); 
     } 

     position = scroll; 

    } else if ($(document).scrollTop() == 0) { 

     $burger.addClass('up-top').removeClass('scrolled'); 

    } 

}); // scroll function 

}); // entire function 

Edit: В соответствии с просьбой, я создал очень простой скрипку https://jsfiddle.net/c5d7r0xq/

В скрипке, коробка начинает с красным фоном. Как только окно прокручивается мимо 125 пикселей, это изменяется на зеленый. Он должен оставаться зеленым, пока окно не прокрутится до самого верха, где оно должно вернуться к красному. Он кратковременно переключается на красный, а затем сразу возвращается к зеленому. Это очень упрощенный пример того, над чем я работаю, но следую тому же принципу.

Answer 1

Проблема в том, что вы находитесь delay, используя addClass('scrolled') до тех пор, пока не выполнит removeClass('scrolled'). (Если я медленно прокручиваю назад, проблема не проявляется.)

Чтобы исправить, либо поставите removeClass('scrolled'), либо полностью закройте затухание addClass('scrolled').

https://jsfiddle.net/mblase75/c5d7r0xq/4/

} else if ($(document).scrollTop() == 0) { 

     $burger.addClass('up-top').queue(function(next){ 
      $(this).removeClass('scrolled'); 
      next(); 
     }); 

    }