Выполнение функции после прокрутки определённого количества пикселей(jQuery)

Question

Нужно сделать обработчик события(scroll) на jQuery. Нужно чтобы после прокрутки страницы на определённое количество пикселей выполнялась функция function handler(). Какими способами это можно сделать?

Answer 1

Отслеживаем прокрутку:

if ($(selector).scrollTop() > n){

    // вызов нужной функции
    handler();


}

n - переменная, определяет вертикальную позицию прокрутки в пикселях

Answer 2

Действует при прокрутке самой страницы. (Для демонстрации пример скопировать и запустить в у себя.)
Если необходимо прокрутку элемента - заменить document.body.scrolltop на элемент прокрутки.

    window.onscroll = function () { // отслеживаем скролл
        var z = document.body.scrollTop; // Получаем высоту передвигаемого сролла
        var pixels = 300; // Указываем количество пикселей
        if (z > pixels){
            console.log("Прокручено на 200px") // Для демонстрации вывод сообщения. У себя меняете на выполнение Вашей функции.
        }
    }

<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>
<div>2 раза КУ</div>

Answer 3

Вариант jQuery.

$(window).scroll(function() {
  if ($(document).scrollTop() > 100) { //прокручиваем страницу вниз на 100px
    $('body').css('background', 'red'); //получаем событие
  } else { //если меньше чем на 100px
    $('body').css('background', 'white'); //возвращаем
  }
});

body {
  height: 200vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
крутите

Answer 4

При помощи "доп. проверки" можно выполнить любое действие, после определённого кол-ва пикселей, только один раз.

В примере показано использование после n px и до n px

let isScroll = 0, // доп. проверка
    targetScroll = 100; // расстояние до действия / в px
    
$(window).on('scroll', function(){
  if(isScroll === 0 && $(this).scrollTop() >= targetScroll) {
    isScroll = 1;
    $('.block').css('background', 'red');
    console.info('change 1');
  } else if(isScroll === 1 && $(this).scrollTop() < targetScroll) {
    isScroll = 0;
    $('.block').css('background', 'green');
    console.info('change 0');
  }
});

body {
  height: calc(100vh + 500px);
}

.block {
  display: block;
  width: 100%;
  height: 50px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block"> </div>

БЛОГ НА HUSL

Выполнение функции после прокрутки определённого количества пикселей(jQuery)

Ответы (4 шт):