javascript - 绝对位置变成滚动位置

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

我怎样才能做到这一点？

#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>

最佳答案

$(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

希望这可以帮助！

关于javascript - 绝对位置变成滚动位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49925614/