Question

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

我该怎么做？

#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如果fixed div不是屏幕顶部的90px，则移除#redIcon.fixed{ position:fixed; top:0px; }类。最后，您需要将其添加到CSS中，以便在添加类的情况下修复位置。

OpenCV Error: Parsing error (Unknown layer type: shortcut) in ReadDarknetFromCfgFile

工作CodePen：https://codepen.io/ben456789/pen/OZPEpG

希望这有帮助！

位置绝对变为固定在滚动

1 个答案: