1

这个例子似乎从底部将红色变为蓝色。但是，我想通过滚动将红色从顶部位置变为蓝色。你能告诉我好的解决方案吗？如果有使用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;
}
4

4 回答 4

0
于 2013-08-10T08:53:07.393 回答
0

看一下这个 。我想这就是你想要的。

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

演示可在此处获得

于 2013-08-10T12:26:32.307 回答
0 
#scroll1{
   background-color:blue;
   width: 50px;
   height:800px

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

}

根据示例中使用的方法，这可以通过 css 完成。只换颜色。

于 2013-08-10T08:32:12.220 回答
0

当您说滚动时，您的意思是逐渐淡入另一种颜色吗？还是您希望改变立即发生？

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

于 2013-08-10T08:33:12.350 回答