通過滾動更改顏色

Question

此示例似乎要將紅色從底部更改為藍色。 但是，我想通過滾動將紅色從最高位置更改為藍色。 您能告訴我一個好的解決方案嗎？ 如果使用javascript沒關系。
這是我想要的另一個示例。 在此站點上向下滾動時，灰線變為紅色。

<div id="scroll1"></div>
<div id="scroll2"></div>

CSS部分

#scroll1 {
   background-color: red;
   width: 50px;
   height: 800px;
}
#scroll2 {
  bacground-color: blue;
  width: 50px;
  height: 800px;
}

Answer 1

#scroll1{
   background-color:blue;
   width: 50px;
   height:800px

}
#scroll2{
   background-color:red;
   width: 50px;
   height:800px

}

根據示例中使用的方法，這可以通過CSS完成。 只需更換顏色即可。

Answer 2

當您說滾動時，是指逐漸淡入另一種顏色嗎？ 還是您希望更改立即發生？

無論哪種方式，當涉及功能豐富的UI時，CSS都將受到JavaScript的限制。

Answer 3

如果要逐漸更改顏色，則不需要兩個div。

創建一個div但使用漸變顏色作為background-color 。

漸變是從紅色到藍色的，因此滾動時不需要更改CSS / JavaScript，因為漸變會有所不同。

看我在JSFiddle上的示例。

Answer 4

看一下這個。 我想這就是你想要的。

html

<html>
<head></head>
<body>
   <div id="contents"> </div>
<div id="container"></div>
</body>
</html>

樣式表

#container{
    width:5px;
    height:400px;
    background-color: red;
    Position:absolute;
    border:1px #000 solid;
}
#contents{
    width:5px;
    height:400px;
    position:fixed;
    background-color: white;
     border:1px #000 solid;
}

jQuery腳本

$(document).ready(function(){
    $("body").height(1000);
    $(window).scroll(function() {
      var newSize = $("#contents").height() * (1 - $(window).scrollTop() /  ($(document).height() - $(window).height()));
      $("#container").animate({height:newSize+"px"},500);
    });
});

該演示可在此處演示

通過滾動更改顏色

問題描述

4 個解決方案

解決方案1
0 2013-08-10 08:32:12

解決方案2
0 2013-08-10 08:33:12

解決方案3
0 2013-08-10 08:53:07

解決方案4
0 2013-08-10 12:26:32

html

樣式表

jQuery腳本

通過滾動更改顏色

問題描述

4 個解決方案

解決方案1 0 2013-08-10 08:32:12

解決方案2 0 2013-08-10 08:33:12

解決方案3 0 2013-08-10 08:53:07

解決方案4 0 2013-08-10 12:26:32

html

樣式表

jQuery腳本

解決方案1
0 2013-08-10 08:32:12

解決方案2
0 2013-08-10 08:33:12

解決方案3
0 2013-08-10 08:53:07

解決方案4
0 2013-08-10 12:26:32