固定滚动div后一定的高度，然后到达另一个div后停止？

Question

正如标题所示，我正在创建一个具有 fixed 属性的div，然后在用户达到某个滚动点时停止。

下面是我要复制的事件的GIF示例。

http://i.imgur.com/wCXAOwW.gifv

这是我的小提琴：

https://jsfiddle.net/e1u4rqtk/2/

var navWrap = $('#cont'),
  nav = $('cont'),
  startPosition = navWrap.offset().top,
  stopPosition = $('#stop').offset().top - nav.outerHeight();

$(document).scroll(function() {
  //stick nav to top of page
  var y = $(this).scrollTop()

  if (y > startPosition) {
    nav.addClass('sticky');
    if (y > stopPosition) {
      nav.css('top', stopPosition - y);
    } else {
      nav.css('top', 0);
    }
  } else {
    nav.removeClass('sticky');
  }
});

但是它不能正常工作。知道我想念什么吗？

Answer 1

您不需要javascript，可以使用position: sticky

HTML ：（您不需要这些额外的div）

<div class="d" id="fixedscroll">
  <img src="https://ormuco.com/wp-content/uploads/2018/08/Large-Rectangle-336-x-280-Google-Ads-1-1-336x250.jpg">
</div>

CSS：

.d {
  background-color: #FFF000;
  width: 336px;
  height: 600px;
  margin: 0px auto;
}

#fixedscroll img {
  position: sticky;
  top: 0px;
}

检查其工作https://jsfiddle.net/w9n2ubmg/

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

您可以将position: sticky用于更新版本的浏览器，但是如果您希望网站在IE / Edge 15下运行，请查看此示例。

$(function(){

	$("#adArea").css("min-height", $("#adArea").height());
	
	var stopPos = $("#ad").offset().top;
	var contPost = $("#adArea").next().offset().top - $("#ad").height();
	
	$(document).scroll(function(){
		var scrollTop = $(this).scrollTop();
		
		if(scrollTop >= stopPos){
			if(!$("#ad").hasClass("sticky")) $("#ad").addClass("sticky");
			
			if(scrollTop >= contPost){
				$("#ad").css("top", contPost - scrollTop);
			}else{
				$("#ad").css("top", 0);
			}
			
		}else{
			
			if($("#ad").hasClass("sticky")) $("#ad").removeClass("sticky");
		}
		
	});

});

.container {
  width: 100%;
  background-color: #c2c2c2;
}

.block {
  padding: 30px 0;
  width: 100%;
  border: 1px solid #000;
}

.sticky {
  position: fixed;
  top: 0;
}

#stop {
  border:1px solid blue;
  bottom: 0;
  position: absolute;
  width:100%;
  }

#stop{
  display:block;
}

#ad {
	width: 336px;
	height: 250px;
	background-color: #000;
}

#adContainer {
	padding: 50px 0px 300px 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="block"></div>
  <div class="block" ></div>
  <div class="block" ></div>

  <div id="adArea">
	<div id="adContainer">
		<div id="ad"></div>
	</div>
  </div>

  <div class="block"></div>
  <div class="block"></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
</div>