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 е булева променлива, която показва дали елементът е видим или не.