Проверьте, что элемент виден в окне просмотра без плагина:
Сначала определите верхнее и нижнее положения элемента. Затем определите положение нижней части окна просмотра (относительно верхней части страницы), добавив положение прокрутки в высоту окна просмотра.
Если нижнее положение окна просмотра больше, чем верхнее положение элемента, и верхнее положение окна просмотра меньше, чем нижнее положение элемента, элемент находится в окне просмотра (по крайней мере частично). Проще говоря, когда какая-либо часть элемента находится между верхней и нижней границами вашего окна просмотра, элемент отображается на вашем экране.
Теперь вы можете написать оператор if / else, где оператор if выполняется только при выполнении вышеуказанного условия.
В приведенном ниже коде выполняется то, что было описано выше:
//this function runs every time you are scrolling
$(window).scroll(function() {
var top_of_element = $("#element").offset().top;
var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
var top_of_screen = $(window).scrollTop();
if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
// The element is visible, do something
}
else {
// The element is not visible, do something else
}
});
Этот ответ представляет собой краткое изложение того, что обсуждали далее Крис Бир и Энди. Надеюсь, это поможет кому-то еще, кто сталкивается с этим вопросом во время исследований, как я. Я также использовал ответ на следующий вопрос, чтобы сформулировать свой ответ: Показывать Div при прокрутке позиции .
ответ дан Jevon McPherson 17 August 2018 в 11:36
поделиться