Javascript 绝对位置变为滚动上的固定位置

在下面的代码片段中，您将看到我有两个部分。一个绿色，一个蓝色。然后在绿色部分，有一个圆圈图标。基本上，我所寻找的是将圆圈图标放置在当前页面加载的位置，但随着用户滚动，图标将更改为固定位置，直到蓝色部分位于屏幕顶部。然后，当用户向上滚动圆圈图标以执行反向操作并保持固定，直到它回到其原始位置

我该怎么做

#斜折{
高度：80vh；
宽度：100%；
位置：相对位置；
背景：绿色；
}
#雷迪肯{
位置：绝对位置；
底部：0；
左：50%；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
z指数：2；
保证金：0；
}
#雷迪肯img{
高度：90px；
宽度：自动；
}
#秒{
宽度：100%；
高度：400px；
背景：蓝色；
}

因此，每当用户滚动时，此函数都会触发。if语句要查找的是，如果第二个

div

（蓝色背景）距离窗口顶部为90px，（请注意，此

-90

与图像的高度相同），则添加

固定的
类如果
#sec
div从屏幕顶部不是90px，则删除
固定的
类。最后，您需要将其添加到CSS中，以便在添加类时固定位置

#redIcon.fixed{
  position:fixed;
  top:0px;
}

工作代码笔：

希望这有帮助
 位置：粘滞？请在你试图达到效果的地方加入你的js代码，这样我们就可以看到你被粘滞的部分。如果你只是不知道从哪里开始，试着谢谢你。这正是我想要的，但是让圆圈停留在绿色部分，然后一旦蓝色部分到达顶部，图标就会消失。这还不清楚，你想要圆圈停留在绿色部分。那么，当蓝色部分到达顶部时，您希望图标消失吗？如果它停留在绿色部分，它将消失，因为蓝色部分现在位于屏幕顶部。
#redIcon.fixed{
  position:fixed;
  top:0px;
}