Подпрыгивает меню

Пытаюсь зафиксировать отдельный элемент на странице при прокрутке страницы. Использую js код:

    var position = 0;
$(window).scroll(function(e) {
  var $element = $('.header-st');
  var scrollTop = $(this).scrollTop();
  if( scrollTop <= 50 ) { 
    $element.removeClass('hide').removeClass('scrolling');
  } else if( scrollTop < position ) {
    $element.removeClass('hide');
  } else if( scrollTop > position ) {
    $element.addClass('scrolling');
    if( scrollTop + $(window).height() >=  $(document).height() - $element.height() ){
      $element.removeClass('hide');
    } else if(Math.abs($element.position().top) < $element.height()) {
      $element.addClass('hide');
    }
  }
  position = scrollTop;
})  

На страницах, где высота большая эффект работает хорошо - https://monosnap.com/file/652avLqJnn9onOyWcR9iZdT1DJsFEX

Но если высота небольшая закрепленный элемент постоянно подпрыгивает - страница становитсч нечитабельна https://monosnap.com/file/E3PIWU5UL1IrMQBdKAilYUOdhHIoQh (на скринкате не видно высокую скорость, но страница не читабельна).

Как это исправить?