當我向下滾動時，jquery淡入淡出

Question

我在另一篇文章中發現了這個問題，除非需要將其反轉，否則當我向下滾動時，它會淡入div。

var target = $('#bluOverlay'); 
var targetHeight = target.outerHeight(); 

$(document).scroll(function(e){ 
    var scrollPercent = (targetHeight - window.scrollY)/targetHeight; 
    if(scrollPercent >= 0){ 
     target.css('opacity', scrollPercent); 
    } 
}); 

下面是從其他崗位http://jsfiddle.net/meEf4/

Answer 1

工作小提琴可以設置div爲零的opacity開始，然後逐漸時向下滾動增加透明度。從其他崗位

Demo

var target = $('div'), 
 
    targetHeight = target.outerHeight(); 
 

 
$(document).scroll(function(e) { 
 
    var scrollPercent = (targetHeight - window.scrollY)/targetHeight; 
 

 
    if (scrollPercent >= 0) { 
 
    target.css('opacity', 1 - scrollPercent); 
 
    } 
 
});

body { 
 
    height: 3000px 
 
} 
 
div { 
 
    height: 1000px; 
 
    background: red; 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div></div>