如何在向下滾動時更改背景顏色

我有用於向下滾動時更改背景顏色的代碼，但我需要頁面平滑地更改背景兩次（例如，grey @ paragraph 1，yellow @第2段和紅色段落3）。有誰知道如何做到這一點？如何在向下滾動時更改背景顏色

我的代碼：

$(document).ready(function(){ 
    $(document).scroll(function() { 
     var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop()/3000, 0.9); 
     var channel = Math.round(alpha * 255); 
     $("body").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')'); 
    }); 
});

結果：

www.web-app.be/op

來源

2012-05-21 Timmy D' Hooghe

你怎麼通過更改背景「兩次」呢？ – ToddBFisher

你可以操縱這個嗎？ http://stackoverflow.com/questions/4222611/how-to-get-a-vertical-gradient-background-to-work-in-all-browsers - 如果我改變#FFFFF爲＃F00我得到一個紅色到灰色漸變 – mplungjan

請參閱www.web-app.be/op/ 當您向下滾動時顏色會發生變化，從灰色到白色，當您滾動到第3段時，需要將其更改爲第三種顏色。 –

你可以開始嗎？

How to get a vertical gradient background to work in all browsers?

<!DOCTYPE html> 
<html> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Scroll changes bg</title> 
<style> 
#gradient1 { 
    background: #FFFFFF; /* old browsers */ 
    background: -moz-linear-gradient(top, #F00 0%, #CCCCCC 100%); /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#CCCCCC)); /* webkit */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC',GradientType=0); /* ie */ 
} 
#gradient2 { 
    background: #FFFFFF; /* old browsers */ 
    background: -moz-linear-gradient(top, #FF0 0%, #CCCCCC 100%); /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#CCCCCC)); /* webkit */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC',GradientType=0); /* ie */ 
} 

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(document).scroll(function() { 
     var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop()/3000, 0.9); 
     var channel = Math.round(alpha * 255); 
     $("body").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')'); 
    }); 
}); 

</script> 
</head> 

<body> 

<div id="gradient1<li></li>"> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
</div> 
<div id="gradient2"> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
</div> 

</body> 

</html>

來源

2012-05-21 14:09:07 mplungjan

如何在向下滾動時更改背景顏色

回答

相關問題