Question

这example似乎是从底部将红色变成蓝色。但是，我想通过滚动将红色从顶部位置更改为蓝色。你能告诉我一个好的解决方案吗？如果使用javascript就没关系这是我想要的另一个example。向下滚动此站点时，灰线变为红色。

<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

当你说滚动时，你是指逐渐淡入另一种颜色？或者你想让改变立即发生吗？

无论哪种方式，您都将面临javascript，因为CSS在功能丰富的UI方面非常有限。

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);
    });
});

此处可以使用 DEMO

进行演示

通过滚动更改颜色

4 个答案:

html

样式表

jquery脚本