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

Ответ 1

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

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

Ответ 2

Проверьте, виден ли элемент в окне просмотра без плагина:

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

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

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

Ответ 3

Вы можете написать такую функцию 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
    }
});

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

Ответ 4

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

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

detectPartial:

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

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

Ответ 5

var visible = $(".media").visible();

Ответ 6

Здесь можно сделать это без плагина:

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

Если комбинация положения прокрутки и высоты видового экрана больше или равна позиции элемента, она отображается в окне просмотра.

var element_position = $("#element").offset().top;
var scroll_position = $(window).scrollTop();
var viewport_height = $(window).height();

if((scroll_position + viewport_height) > element_position){
    // Do something because the element is in the viewport
}