如何触发一个元素淡入当一个元素可见时首先？

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