Почему не получается сделать элемент невидимым при прокрутке страницы до конца?

#javascript #jquery

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

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);
    }
  });
}); 


Погуглил как определить прокрутку до конца

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


Но элемент исчезает только если прокрутить вниз, потом снова наверх. Работало также
если писал 

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


Но это же не правильно, потому что тогда код привязан к размеру скролла и контента.
Подскажите пожалуйста, как правильно сделать. Заранее спасибо!
    

Ответы

Ответ 1

Попробуйте так

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


В моём случае для позиционирования футера использовался отрицательный margin, поэтому
требовалась ещё часть после комментария.