Làm cách nào để làm mờ một div vào/ra khi cuộn trang?

Question

Đây là jsfiddle: http://jsfiddle.net/NKgG9/

Về cơ bản, tôi muốn các hộp màu hồng đó hiển thị trên trang tải như bình thường nhưng ngay sau khi người dùng cuộn xuống trang tôi muốn chúng mờ đi và biến mất. Khi người dùng cuộn trở lại vị trí của họ hoặc trên cùng của cửa sổ trình duyệt, tôi muốn những hộp màu hồng đó mờ đi trở lại. Tôi vô dụng với JS rất tốt với một số trợ giúp về cách làm điều này.

Tất cả trợ giúp đều được đánh giá cao.

Answer 1

dụ Rất đơn giản: 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"); 
    } 
});​ 

Answer 2

Giống như này? 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"); 
     } 
    }); 

}); 

Ý tưởng cơ bản: đăng ký sự kiện cuộn. Nếu vị trí cuộn di chuyển qua một điểm nhất định, hãy bắt đầu mờ dần và tương tự nếu người dùng cuộn lên mờ dần. Một số chi tiết quan trọng: theo dõi nếu bạn đã mờ dần vào/ra (biến được hiển thị) và dừng bất kỳ sự mờ nhạt nào đang diễn ra nếu bạn bắt đầu một phai mới.

Answer 3

Cảm ơn - điều này thực sự đã giúp tôi.

Ban đầu tôi muốn một giải pháp như "Scroll for More" và đã quản lý để làm như vậy với http://jsfiddle.net/a4FM9/12/ - có thể điều này hữu ích cho bất kỳ ai.