滚动后淡入 div答案

【问题标题】：Fade in div after scrolling滚动后淡入 div
【发布时间】：2014-09-23 18:12:06
【问题描述】：

我需要能够根据用户滚动的像素数量来淡入/淡出 div。这是我现有的jquery。我可以切换它的视图，但我想淡化该切换。这里的正确方法是什么？

$("#subOverlay").hide();

$(window).bind('scroll', function(){
    $("#subOverlay").toggle($(this).scrollTop() > 520);
});

谢谢

【问题讨论】：

标签： jquery

【解决方案1】：

可以这样做：

$(window).bind("scroll", function() {
    if ($(this).scrollTop() > 520) {
        $("#subOverlay").fadeIn();
    } else {
        $("#subOverlay").stop().fadeOut();
    }
});

演示： http://jsfiddle.net/ZHkY8/

【讨论】：

这个解决方案对我来说几乎是完美的。我正在使用它来淡入单页网站上的粘性菜单。我唯一的问题是我们可以在加载页面时看到菜单出现和消失。有没有办法隐藏它并避免看到菜单出现和淡出？看这里：dev.manifold.ws/retail28
没关系，我只是用 css display:none 隐藏了我的菜单；它成功了。

【解决方案2】：

$(window).bind("scroll", function() {
    if ($(this).scrollTop() > 520) {
        $("#subOverlay").stop().fadeOut();
     } else {
        $("#subOverlay").fadeIn();
    }
});

^^ 只需反转数组:)

【讨论】：

【解决方案3】：

我正在处理类似于 Alexander 的链接的内容，但需要它在屏幕顶部以超过 100% 的速度消失。

您可以根据浏览器大小调整对象何时开始淡化以及何时结束淡化。如果你想从 0.2 而不是 0 开始，你也可以调整开始淡入淡出的不透明度。

http://www.kevinnunn.com/fadetest/

【讨论】：