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>时，如何首先触发fadeIn？

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

如何在元素可见时首先触发元素fadeIn？

1 个答案: