与对象的位置导航

Question

我有一个位置保持不变的想法，我想尝试一下但遇到一些困难。

我制作了这个快速的Codepen（代码可能会更好，但主要用于视觉效果https://codepen.io/itsmeagian/pen/GRpEJVp

.container {
  height: 10000px;
}

nav {
  display: flex;
  justify-content: space-around;
}

.square {
  background-color: green;
  width: 100px;
  height: 100px;
  margin: auto;
  display: block;
  position: sticky;

}

我想用3个数字固定导航，但是当它到达绿色方块时，它应该越过数字并保持固定并变成红色。当您回到顶部时，它应该回到原来的位置并回到绿色。我将如何存档？

Answer 1

要更改背景色，您需要以animation的方式查看，但是，根据位置，您需要添加top: 0之类的内容以将组件设置在哪个位置sticky 。