2012-06-23 73 views
2

我需要能够淡入/淡出div,具体取决于用户滚动的px数量。这里是我现有的jquery。我可以切换其视图,但我想淡化切换。这里的正确方法是什么?滚动后淡入div

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

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

感谢

回答

8

这是可以做到如下:

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

DEMO:http://jsfiddle.net/ZHkY8/

+0

完美的感谢! –

+0

这个解决方案对我来说几乎是完美的。我正在使用它在单页网站上的粘滞菜单中淡入淡出。我唯一的问题是,我们可以看到加载页面时菜单显示并淡入淡出。有没有办法隐藏它,避免看到菜单出现和淡出?看到这里:http://dev.manifold.ws/retail28/ –

+0

没关系,我只是隐藏我的菜单与CSS显示:无;它做到了。 –

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

^^简单地恢复阵列:)

1

我正在研究类似亚历山大的链接,但需要它在屏幕顶部比100%更快地褪色。

您可以调整对象何时开始淡入淡出以及何时结束与浏览器大小相关的淡化。您还可以调整开始淡出透明度,如果你想要启动它在说0.2,而不是0.1

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