Already a lot of things looked, I just can not understand what the error is. I have a menu that sticks to the screen and disappears when a footer appears. While trying to make it disappear just by scrolling down to the end.

var hght = 95; var mrg = 0; $(function(){ var elem = $('#menu'); var top = $(this).scrollTop(); $(window).scroll(function(){ top = $(this).scrollTop(); if ($(window).scrollTop() == $(document).height() - $(window).height()){ elem.hide(); } if (top+mrg < hght) { elem.css('top', (hght-top)); } else { elem.css('top', mrg); } }); });

Google how to determine scroll to the end

 if ($(window).scrollTop() == $(document).height() - $(window).height()){ elem.hide(); }

But the element disappears only if you scroll down, then up again. It also worked if I wrote

 if ($(window).scrollTop() == $(window).height()/3){ elem.hide(); }

But this is not correct, because then the code is tied to the size of the scroll and content. Please tell me how to do it right. Thank you in advance!

  • can you add a minimal working example? - Grundy

1 answer 1

Try this

 var scrollBottom = $(window).scrollTop() + $(window).height(); var footerPosition = $('.footer').position().top //- $('.footer').height() if(scrollBottom >= footerPosition) elem.hide();

In my case, a negative margin was used to position the footer, so a part was needed after the comment.