Độ mờ Div dựa trên vị trí thanh cuộn

Question

Tìm ví dụ về cách làm mờ một số div khi thanh cuộn đạt đến một vị trí nhất định here. Nhưng nó không phải là một loại phai nhẹ. Đây là mã từ đó jsfiddle:

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

Tôi muốn phần trăm độ mờ để phản ánh vị trí của thanh cuộn. Ví dụ khi thanh cuộn ở vị trí trên cùng, độ mờ div là 100%. Khi tôi cuộn xuống 35px, tôi muốn độ mờ của div sẽ giảm dần xuống 0%

Có lẽ một kỹ thuật có thể là khi div A ở độ cao 35px so với trên cùng, div B = 100% opacity. Khi div A cách 0px từ đầu, div B = 0% opacity. Và có nó mờ dần ở tất cả các giai đoạn ở giữa.

Cảm ơn!

CẬP NHẬT: Cảm ơn tất cả sự giúp đỡ của hầu hết chúng hoạt động khá tốt, nhưng tôi thực sự cần nó hoạt động trong phạm vi 35px. Vì vậy, tôi đã tạo ra một ví dụ mới mà sẽ làm cho nó rất rõ ràng như thế nào nó sẽ làm việc. http://jsfiddle.net/J8XaX/1/

CẬP NHẬT 2: thiết bị di động: Tôi đã thử trên iPhone và phai không hoạt động trơn tru. Cách nó hoạt động là nếu bạn trượt nửa chừng và thả ngón tay ra, thì độ mờ sẽ giảm xuống. Nhưng nếu bạn cố gắng di chuyển trơn tru, nó sẽ chuyển từ opacity 100% trực tiếp thành độ mờ 0%. Tự hỏi liệu có cách nào để sửa lỗi này không ??

Cảm ơn !!

Answer 1

thử một cái gì đó giống như

var divs = $('.social, .title'), 
    limit = 35; /* scrolltop value when opacity should be 0 */ 

$(window).on('scroll', function() { 
    var st = $(this).scrollTop(); 

    /* avoid unnecessary call to jQuery function */ 
    if (st <= limit) { 
     divs.css({ 'opacity' : (1 - st/limit) }); 
    } 
}); 

khi scrolltop đạt 35px thì độ mờ đục của divs là 1 - 35/35 = 0

dụ fiddle: http://jsfiddle.net/wSkmL/1/
fiddle của bạn Cập nhật: http://jsfiddle.net/J8XaX/2/ (Tôi đã thay đổi từ 35 đến 130px để đạt được hiệu ứng bạn đã viết trong div cam)

Answer 2

var divs = $('.social, .title'); 
$(window).scroll(function(){ 
    var percent = $(document).scrollTop()/($(document).height() - $(window).height()); 
    divs.css('opacity', 1 - percent); 
}); 

$(document).height() - $(window).height(): khu vực di chuyển
$(document).scrollTop(): vị trí cuộn hiện
percent: vị trí cuộn hiện theo phần trăm
divs.css('opacity', 1 - percent);: thiết lập Opacity của divs

Xem thêm this example.

Answer 3

var divs = $('.social, .title'); 
$(window).scroll(function(){ 
    var p = $(window).scrollTop()/ $(window).height(); 
    divs.stop().fadeTo("fast",p); 
}); 

Answer 4

var divs = $('.social, .title'); 
$(window).scroll(function(){ 
    var fadeval = 1 - ($(window).scrollTop())/($(window).height());  
    divs.css({opacity: fadeval}); 
});​ 

Fiddle demo

chỉnh sửa: wow rất nhiều câu trả lời đánh bại tôi trong khi tôi đã đăng

chỉnh sửa: 2

var divs = $('.fademe'); 
$(document).ready(function(){divs.css('opacity', 0);}); //can be done using CSS also 
$(window).scroll(function(){ 

    var percent = $(document).scrollTop()/(35); 
    divs.css('opacity', percent);  
});​ 

Updated JsFiddle