Отображать тег только при прокрутке страницы сверху

Question

Как определить, прокручивает ли пользователь вниз с помощью jQuery? Я хочу, чтобы фиксированный div показывался только тогда, когда браузер находится в пределах 300px от вершины. Когда пользователь прокручивает отметку ниже 300 пикселей, он должен исчезнуть. Когда пользователь прокручивает обратно наверх, он должен скрыться. Как мне это сделать?

Answer 1

var docElem = $(document.documentElement)
docElem.scroll(function(e) {
    if(docElem.scrollTop() < 300) {
        whatever.show();
    } else {
        whatever.hide();
    }
});

Возможно, вам придется использовать другой элемент (например, docElem) в разных браузерах, но это должно работать в Firefox. (Я не проверял это)

РЕДАКТИРОВАТЬ : Подробнее jQuery

Answer 2

scrollTop и scrollY похоже, что они помогут вам начать работу в IE и Firefox. Не уверен насчет других браузеров.

Answer 3

Присоедините слушателя прокрутки к окну: http://docs.jquery.com/Events/scroll

Затем проверьте scrollTop окна: http://docs.jquery.com/CSS

Когда scrollTop меньше 300, покажите () элемент div, в противном случае скрывайте () его.

Answer 4

Просто проверьте положение окна scrollTop на событии прокрутки и сравните его с элементом offsetTop position:

$(window).scroll(function(e){ 
  $el = $('.myElement'); 
  if ($(this).scrollTop() > $el.offset().top){ 
    $el.hide(); 
  } else { 
    $el.show();
});

Запустите этот пример здесь .