Подтвердить что ты не робот

JQuery, если прокрутка - определенное количество пикселей

Есть ли встроенная функция jQuery для определения длины прокрутки?

Я пытаюсь написать функцию, которая добавит класс в div, если пользователь прокрутил 50 пикселей сверху.

Итак, код будет выглядеть так:

if(userHasScrolled) {
     $('#myDiv').addClass('hasScrolled');

}

Ответ 1

Вы можете проверить $(document).scrollTop() внутри обработчика прокрутки:

var $document = $(document),
    $element = $('#some-element'),
    className = 'hasScrolled';

$document.scroll(function() {
  if ($document.scrollTop() >= 50) {
    // user scrolled 50 pixels or more;
    // do stuff
    $element.addClass(className);
  } else {
    $element.removeClass(className);
  }
});

Если добавление имени класса - это все, что вам нужно (никаких других действий не требуется), это можно сократить до:

var $document = $(document),
    $element = $('#some-element'),
    className = 'hasScrolled';

$document.scroll(function() {
  $element.toggleClass(className, $document.scrollTop() >= 50);
});

См. http://api.jquery.com/scrollTop/.

Обратите внимание, что использовать обработчики событий scroll очень неэффективно.