时间戳

首页 > 解决方案 > 固定/粘性位置对象的颜色变化

javascript - 固定/粘性位置对象的颜色变化

问题描述

我看过这个页面（chrome 版本），我想知道那个圆圈会下降并改变颜色。我正在尝试自己做类似的事情，但我陷入了从橙色背景的粉色圆圈到白色背景的绿色圆圈的过渡中。我尝试了两种策略。

a) 使用位置：粘性；+ 将一层隐藏在另一层之下并适当协调，请参见下面的代码。问题是这仅适用于其中一个圆圈（“出现”的那个），但不适用于“隐藏”的那个；所以效果是不一样的。

.yellowbanner {
    background-color: yellow;
    height: 500px;
    width: 500px;
    z-index: 2;
    position: sticky;
    top:50px;
    left:0px;
    border-radius: 100%;
  }
  .orangebanner {
    background-color: orange;
    height: 500px;
    width: 500px;
    z-index: 21;
    position: sticky;
    top:50px;
    left:0px;
    border-radius: 100%;
  }
  .greenbanner {
    background-color: mediumspringgreen;
       height: 1000px;
    width: 100%;
    z-index: 3;
    position: relative;
    top:500px;
    left:0px;
  }
  .bluebanner {
    background-color: blue;
    opacity: 1;
    height: 1500px;
    width: 100%;
    z-index: 1;
    position: relative;
    top:0px;
    left:0px;
  }
  .redbanner {
    background-color: white;
    height: 3000px;
    width: 100%;
    z-index: -2;
    position: absolute;
    top:0;
    left:0px;

  }
<!DOCTYPE html>
<html>
<head>
  <title>DevProject</title>
  <link href="./resources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
  
    
  <div class="greenbanner"><div class="yellowbanner"></div></div>
  <div class="redbanner"></div>
    <div class="bluebanner">
        <div class="orangebanner"></div>
    </div>
  </body>
</html>

B)使用位置：固定；+ 一些 JS。然而，我发现的一切都会改变整个圆圈的颜色（在某个时刻），而不仅仅是它的适当部分。

谢谢

标签： javascripthtmlcss

解决方案

推荐阅读