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

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。