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

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() a>

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