Триггерные события, когда окно прокручивается до определенных позиций

Я хотел бы вызвать функции, когда окно браузера выходит за пределы определенной точки
(например, пользователь прокрутил окно ниже 200px сверху

Есть ли какое-то событие, к которому я могу привязать, и как я могу проверить, насколько смещение от верхней части браузера до верхней части страницы?

Ответ 1

Вы можете использовать onscroll

function testScroll(ev){
    if(window.pageYOffset>400)alert('User has scrolled at least 400 px!');
}
window.onscroll=testScroll

Если вы хотите использовать jQuery-решение, вы можете использовать scroll.

Ответ 2

Популярный плагин для того, что вы описываете, jQuery Waypoints.

Если вы не хотите использовать плагин, существуют следующие механизмы:

$(window).scrollTop(); // returns pixel value
$(window).scroll(function () { /* code here */ });

Однако, поскольку событие scroll срабатывает очень быстро, вы должны быть осторожны, чтобы поместить только код, который быстро выполняется внутри обработчика. Общей методикой является "дросселирование" скорости, с которой вы обрабатываете событие, проверяя, прошло ли определенное количество времени.

Ответ 3

Если вы не хотите использовать плагин, вы можете попробовать это

function isScrolledIntoView(elem)
        {
        //alert("method invoked");
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <=      docViewBottom) && (elemTop >= docViewTop));

        }

Я использовал эту функцию для загрузки изображений как ленивой загрузки. Вызывается эта функция для прокрутки и затем отправляется запрос ajax на основе значения возвращаемого значения функции. это отправит запрос ajax, когда пользователь прокрутил нижнюю часть элемента (например, используется в качестве параметра в методе).

if(isScrolledIntoView($('.items:last'))){
    //send the ajax request here 
}

Это мой первый ответ на этом сайте. Надеюсь, вы поймете