Цикл для каждого скролла страницы

Нужен написать код, который при скроллинге страницы вниз прикрепляет блок с фильтрами сверху, но как только начинается скроллинг вверх, этот блок с фильтрами нужно убирать.

Написан этот код:

$(document).ready(function () {
    var $filterSticker = $(".sorts-and-filters");
    var $filterStickerId = $("#sticky-wrapper");
    var previousScroll = 0;
    var $top = $('#top');
    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();

       
       if (currentScroll > previousScroll){
           $filterSticker.fadeIn();
           $filterSticker.sticky({topSpacing: $top.height(),
            'wrapperClassName': 'sticky-wrapper sorts-and-filters__wrapper',
        })
       }
       else if (currentScroll < previousScroll) {
          $filterSticker.fadeOut();
       }
       previousScroll = currentScroll;
    });
}());

Но работает не так, как нужно. Блок с фильтрами скрывает, но не показывает его обратно, когда снова скроллишь вниз. И не возвращает его на место, когда добираешься до самого верха страницы, то есть он полностью скрыт, когда вверх скроллишь. Подскажите, как мне сделать это?