如何觸發一個元素淡入當一個元素可見時首先？

Question

可以說我在這個頁腳中有div #this-div。

HTML：

<footer> 
    <div id="this-div"> 
    </div> 
</footer> 

CSS：

footer { 
    background:black; 
} 

#this-div { 
    height:50px; 
    width:50px; 
    background:red; 
    margin:0 auto; 
    display:none; 
} 

然後我淡入＃這個-DIV使用jQuery這樣的：

$(document).ready(function() { 
$('#this-div').fadeIn('slow'); 
}); 

但現在。比方說，我在我的網站上獲得了很多內容，頁腳也縮小了一些。當屏幕上顯示<footer>時，我怎樣才能觸發淡入淡出？

的jsfiddle：http://jsfiddle.net/2ao1mfs9/

Answer 1

爲了做到這一點，你需要找出您的頁腳的offset這樣的：

var footerTop = $('footer').offset().top; 

然後，當視域達到從​​的頂部的距離屏幕當用戶滾動，你可以觸發你的fadeIn效果，例如：

$(window).scroll(function(){ 
    if($(this)).scrollTop() >= footerTop){ // adding a little more to the footerTop's value may give a better feeling. 
     $('#this-div').fadeIn('slow'); 
    } 
});