Код, чтобы скрыть меню за N пикселей до конца страницы в зеро блоке на тильде

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

<style>
.menu-st {
    transition:  all 0.4s cubic-bezier(0, 0, 0.8, 1.0);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
.hide-menu{    transform: translateY(-100%)}
.t228__mobile { position: fixed}
</style>

<script>
$(document).ready(function(){ 
let menuID = $('#rec682212874'); 
menuID.find('.t396__artboard').addClass("menu-st hide-menu"); 
let scrollPrev = 0,
    distance = 0,
    $hideMenu = $('.menu-st');
    
$(window).scroll(function() {  
        var top = $(document).scrollTop(); 
  if ( (top > scrollPrev) && (top >= distance) ) {  
      $hideMenu.addClass('hide-menu'); 
  } else if ( top >= 500 ) {  
      $hideMenu.removeClass('hide-menu');
  } else $hideMenu.addClass('hide-menu'); 
  scrollPrev = top; 
}); 
});
</script>