JQuery проверяет, отображается ли элемент в области просмотра

Согласно документации для этого подключаемого модуля, .visible() возвращает логическое значение, указывающее, является ли элемент видимым. Итак, вы бы использовали это так:

if ($('#element').visible(true)) {
    // The element is visible, do something
} else {
    // The element is NOT visible, do something else
}

Проверьте, отображается ли элемент в области просмотра с помощью jquery:

Сначала определите верхнее и нижнее положение элемента. Затем определите положение низа области просмотра (относительно верхней части страницы), добавив положение прокрутки к высоте области просмотра.

Если нижняя позиция области просмотра больше верхней позиции элемента И верхняя позиция области просмотра меньше нижней позиции элемента, элемент находится в области просмотра (по крайней мере, частично). Проще говоря, когда какая-либо часть элемента находится между верхней и нижней границами области просмотра, элемент отображается на экране.

Теперь вы можете написать оператор 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 при прокрутке позиции.

Вы можете написать такую ​​функцию jQuery, чтобы определять, находится ли элемент в области просмотра.

Включите это где-нибудь после включения jQuery:

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

Пример использования:

$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // do something
    } else {
        // do something else
    }
});

Обратите внимание, что при этом проверяются только верхнее и нижнее положение элементов, но не проверяется, находится ли элемент за пределами области просмотра по горизонтали.

Вы можете увидеть этот пример.

// Is this element visible onscreen?
var visible = $(#element).visible( detectPartial );

detectPartial:

• Верно: виден весь элемент
• false: часть элемента видна

visible - это логическая переменная, которая указывает, является ли элемент видимым или нет.