绝对位置变成滚动固定位置

Question

在下面的 sn-p 中，你会看到我有两个部分。一绿一蓝。然后在绿色部分，有一个圆圈图标。本质上，我正在寻找的是将圆形图标放置在当前页面加载的位置，然后随着用户滚动，图标更改为固定位置，直到蓝色部分位于屏幕顶部。然后当用户向上滚动圆形图标以执行反向操作并保持固定直到它回到原来的位置。

我该怎么做？

#slantWrap {
	height: 80vh;
	width: 100%;
	position: relative;
  background: green;
}
#redIcon {
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 2;
	margin: 0;
}
#redIcon img {
	height: 90px;
	width: auto;
}
#sec {
  width: 100%;
  height: 400px;
  background: blue;
}  

<div id="slantWrap">
  <div id="redIcon">
    <img src="http://www.iconhot.com/icon/png/devine/256/circle.png" alt="icon">
  </div>
</div>
<section id="sec"></section>

Answer 1

$(window).scroll(function (e) {
     if($(this).scrollTop() >= $('#sec').offset().top - 90){
      $('#redIcon').addClass('fixed');
     } else {
      $('#redIcon').removeClass('fixed');
  }
 });

因此，每次用户滚动时都会触发此函数。 if 语句要查找的是，如果第二个div（蓝色背景）距离窗口顶部90px，（注意这个- 90 与图像高度相同）fixed 的添加类如果#sec div 距离屏幕顶部不是 90px，则删除fixed 类。最后，您需要将其添加到您的 CSS 中，以添加与类固定的位置。

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

工作代码笔：https://codepen.io/ben456789/pen/OZPEpG

希望这会有所帮助！