如何在页面滚动时使一个div淡入/淡出？

Question

这是 jsfiddle 链接：http://jsfiddle.net/NKgG9/ 我基本上希望那些粉色的框在页面加载时像往常一样显示，但是当用户向下滚动页面时，我希望它们淡出并消失。当用户向上滚动到他们的位置或浏览器窗口的顶部时，我希望那些粉色的框再次淡入。我对 JS 无能为力，所以需要一些帮助来完成这个任务。

感谢您的所有帮助。

- egr103

---

你想让它们根据滚动值淡入/淡出到特定级别，还是在检测到滚动时立即应用效果？ - Cheery

理想情况下，当检测到滚动时淡出，然后当用户回到浏览器窗口顶部时淡入。 - egr103

Answer 1

非常简单的例子：http://jsfiddle.net/a4FM9/2/

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop() <10 ){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});​

- Cheery

---

太棒了。感谢@Cheery！不过我注意到一个问题，当你在页面顶部时尝试向上滚动时，div会闪烁。有没有办法阻止这种情况发生？ - egr103

然而，有一个小问题，就是当你在Firefox中滚动页面到一半并刷新页面时，这两个div会再次显示出来。我该如何解决这个问题？ - egr103

@egr103 例如，在$(document).ready ..函数中添加$(window).trigger('scroll');。 - Cheery

不，那似乎没有解决问题，但我可能实现有误：http://jsfiddle.net/a4FM9/3/ - egr103

我也注意到它重叠在图像下面的内容上，有没有办法控制它只显示在大图像上方？ - egr103

Answer 2

像这样吗？http://jsfiddle.net/NKgG9/6/

$(function(){ 
    var targets = $(".title, .social");
    if($(window).scrollTop() > 10){
      targets.hide();
    }
    $(window).scroll(function(){
        var pos = $(window).scrollTop();
        if(pos > 10){
            targets.stop(true, true).fadeOut("fast" );
        } else {
            targets.stop(true, true).fadeIn("fast");
        }
    });

});

基本思路：订阅滚动事件。如果滚动位置超过某个点，开始淡出；反之，如果用户向上滚动，则淡入。一些重要细节：跟踪您是否已经在淡入/淡出（变量显示），并在开始新的淡入/淡出时停止任何正在进行的淡入/淡出。

- Andre Loker

---

这个问题和第一个解决方案一样，当你在Firefox中滚动页面到一半并刷新页面时，两个div会再次显示出来。我该如何解决这个问题？ - egr103

我已更新答案。虽然我无法在 Firefox 中重新创建此问题，但应该可以解决：如果窗口最初已经滚动，请隐藏元素。 - Andre Loker

不好意思，这个也不起作用。事实上，淡出似乎也不起作用，它只是突然隐藏了它，没有效果，但它确实再次淡入。奇怪。 - egr103

我也注意到它重叠在图像下面的内容上，有没有办法控制它只显示在大图像上方？ - egr103