jquery - 如何使元素在页面滚动时淡入？

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航点。

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

<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。标题说你想要“淡入淡出”，在这种情况下你会想要使用fadeInand fadeOut。如果您只想添加和删除一个类，请使用addClassand removeClass。