Question

我基本上希望那些粉红色的盒子像正常一样在页面加载时显示，但是一旦用户向下滚动页面，我希望它们淡出并消失。当用户向上滚动到他们的位置或浏览器窗口的顶部时，我希望那些粉红色的盒子再次淡入。我对JS毫无用处，对如何做到这一点有一些帮助。

所有帮助表示赞赏。

Answer 1

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

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");
        }
    });

});

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

Answer 3

谢谢 - 这个真的帮助了我。

我原本想要一个类似“Scroll for More”的解决方案，并确实设法使用http://jsfiddle.net/a4FM9/12/ - 这可能对任何人都有用。

如何在页面滚动中淡入/淡出div？

3 个答案: