如何在元素可见时先触发元素淡入？

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

然后我用 jQuery 淡入 #this-div 像这样：

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

如何在元素可见时先触发元素淡入？

How to trigger a element to fadeIn first when a element is visible?

jquery

fadein