如何使元素在页面滚动时淡入？答案

【问题标题】：How to make element fade in on page scroll?如何使元素在页面滚动时淡入？
【发布时间】：2011-11-28 03:00:52
【问题描述】：

我的页面中有以下元素：

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

这个元素的 CSS 是：

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

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

【问题讨论】：

【解决方案1】：

查看 jQuery Waypoints。

使用这个插件，你可以做这样的事情：

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

还有你的 jQuery：

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

【讨论】：

【解决方案2】：

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

然后基于该值，您将添加和删除类或fadeIn 和fadeOut。标题说你想要“淡出”，在这种情况下你会想要使用fadeIn 和fadeOut。如果您只想添加和删除一个类，请使用addClass 和removeClass。

【讨论】：