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

Question

我的页面中有以下元素:

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

该元素的 CSS 是:

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

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

Answer 1

查看 jQuery Waypoints .

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

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

还有你的 jQuery:

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