如何在页面滚动中使元素淡入？

Question

我的页面中有以下元素：

<div id="banner" class="disappear">Hello</div>

此元素的CSS为：

#banner {position:fixed;}
.disappear {opacity:0;}
.appear {opacity:1;}`

我想知道如何在页面滚动到某个点时使用jQuery将类从.disappear更改为.appear，然后在页面返回时返回.disappear原来的位置。

Answer 1

查看jQuery Waypoints。

使用此插件，您可以执行以下操作：

<div id="banner">Hello</div>

你的jQuery：

$("#banner").waypoint(function(){
    $(this).fadeIn(750);
},{
    offset: 'bottom-in-view'
});

Answer 2

我没有做一个完整的例子。但是每次窗口滚动时你都需要使用$(window).scroll(function(){来执行。然后在该函数中，您需要检查$(window).scrollTop()以确定用户滚动了多远。

http://jsfiddle.net/s8dhy/

然后根据该值，您将添加和删除类或fadeIn和fadeOut。标题显示您想要“淡出”，在这种情况下，您需要使用fadeIn和fadeOut。如果您只想添加和删除某个类，请使用addClass和removeClass。