Элемент затухания, когда пользователь достигает нижней части экрана

Question

У меня есть элемент, который всегда остается на 5% нижней части экрана (позиция: фиксированная; нижняя: 5%;).

Это просто подсказка, в которой написано "Прокрутите вниз". Я хочу, чтобы он исчез, когда вы достигли нижней части экрана.

Как определить, что пользователь достиг нижней части экрана?

Answer 1

Вам нужно получить ширину документа и рассчитать ее с шириной окна и смещением прокрутки:

if (documentWidth == (windowWidth + scrollOffset)) {
   $('#hint').fadeOut();
}

Здесь было похожее обсуждение: Проверьте, прокрутил ли пользователь до дна

Answer 2

Используйте метод jquery scroll ():

var fadeFlag = false;

$(window).scroll(function(e) {

  // Check if we reached bottom of the document and fadeOut the target element
  if( $(window).height() + $("html").scrollTop() == $(document).height()-1) {

      $('#target').fadeOut();
      fadeFlag = true;

  } else {
      // Here you can do fadeIn
      if(fadeFlag) $('#target').fadeIn();

      fadeFlag = false;
  }
});

Я использовал $ ("html") вместо $ (окно) , так как это не доставит вам хлопот в IE8