jQuery - 檢查元素是否進入視圖，淡入淡出

當我知道指定哪個元素時，我發現了這個問題的答案，但是我正在尋找的方法是檢查'滾動'是否具有特定類的任何元素都已經進入視圖，並按照它們的方式修改它們（例如，更改不透明度 - 只有那些進入視圖的視圖）。我知道代碼可能看起來類似於此，但我無法使它工作：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); 

} 
});

非常感謝。注意：存在變量差異是因爲我希望元素在到達屏幕中間時可見。

來源

2014-03-28 cVergel

從Check if element is visible after scrolling和Using jQuery to center a DIV on the screen借款，以檢查是否元素在屏幕的可視中心：

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); 
     } 
    }); 
});

來源

2014-03-28 06:50:15 Nathan

非常感謝，作品像魅力！ – cVergel

我用skrollr.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"");

我在我的移動，所以我無法測試它的權利的最簡單方法現在但我相信它應該有所幫助，如果不是，至少可以給你一個新的途徑來嘗試！

這些資源可以幫助您太： How to update (append to) an href in jquery?

Fade out element, when user reach the bottom of the screen

來源

2014-03-28 06:16:29 HulaHoof

jQuery - 檢查元素是否進入視圖，淡入淡出

回答

相關問題