jQuery - проверете дали елементите излизат в изглед, избледняват в тези, които го правят

Намерих отговора на този проблем, когато знам кой елемент да посоча, но това, което търся, е начин да проверя „при превъртане“ дали НЯКОИ елемент с конкретен клас е излязъл в полезрението и да ги променя, както правят (напр. промяна на непрозрачността - само тези, които се виждат). Знам, че кодът може да изглежда нещо подобно на това, но не мога да го накарам да работи:

jQuery(window).on("scroll", function() {
var difference = jQuery(window).offset().top + jQuery(window).height()/2;
if (difference > jQuery(".makeVisible").offset().top) {
     jQuery(this).animate({opacity: 1.0}, 500);

}
});

Благодаря ти много. Забележка: променливата разлика съществува, защото искам елементите да станат видими, когато достигнат средата на екрана.


javascript scroll html jquery css
person cVergel    schedule 28.03.2014    source източник

Отговори (2)


arrow_upward
5
arrow_downward

Заемане от Проверете дали елементът се вижда след превъртане и Използване на jQuery за центриране на DIV на екрана, за да проверите дали елементът е във видимия център на екрана:

function isScrolledIntoView(elem)
{
    var centerY = Math.max(0,((jQuery(window).height()-jQuery(elem).outerHeight()) / 2) 
                  + jQuery(window).scrollTop());

    var elementTop = jQuery(elem).offset().top;
    var elementBottom = elementTop + jQuery(elem).height();

    return elementTop <= centerY && elementBottom >= centerY;
}

След това можем да променим вашия подход към:

jQuery(window).on("scroll resize", function() {
    jQuery(".makeVisible").each(function(index, element) {
        if (isScrolledIntoView(element)) {
           jQuery(element).animate({opacity: 1.0}, 500);
        }
    });
});
person Nathan    schedule 28.03.2014

arrow_upward
0
arrow_downward

Използвам приставката skrolr.js, за да постигна това, която е тук в github https://github.com/Prinzhorn/skrollr

След това можете да прикачите параметри към всякакви тагове, така че например да кажете, че избледнявате изображение, можете да имате img таг като

<img src="img/blur/llhs_cake.png" alt="" height="115" width="118" class="overlay" id="llhs_cake" data--bottom-bottom="opacity:0;" data--top-top="opacity:0" data--top-top data--center-center="opacity=1">

с формат

data-[offset]-(viewport-anchor)-[element-anchor]

така че използва -- за да заобиколи параметъра за отместване.

Мисля, че това е най-лесният начин да постигнете това, което търсите, ако след това използвате jquery, за да го прикачите с нещо като

$('*').attr("data--bottom-bottom="opacity:0;" data--top-top="opacity:0" data--top-center="opacity=1"");

На мобилния си телефон съм, така че не мога да го тествам в момента, но вярвам, че би трябвало да помогне, ако не, може поне да ви даде нова възможност да опитате!

Тези източници също могат да ви помогнат: Как да актуализирате (добавете към) href в jquery?

Изчезващ елемент, когато потребителят достигне дъното на екрана

person HulaHoof    schedule 28.03.2014