一旦到达页面上的某个点，div 在另一个下方滚动

Question

我有 3 个 div div1 div2 div3 在另一个之上

我试图让 div2 在滚动时滚动过去 div1 后到达其顶部时保持固定，然后 div3 在其下方滚动

我为此使用 html、css、javascript，没有 jquery。

我试图对此进行调整。

 window.onscroll = function() {
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  if (scrollTop >= document.getElementById("div1").offsetTop ) {
    document.getElementById("div3").style.position = "relative";
    document.getElementById("div2").style.marginTop = " 70px";
    document.getElementById("div3").style.marginTop = "- 50px";
  } else {
    document.getElementById("div3").style.position = "static";
    document.getElementById("div2").style.marginTop = "0px";
    document.getElementById("div3").style.marginTop = "0px";
  }
}

现在我正在尝试这个： var objDiv = document.getElementById("div2"); objDiv.scrollTop = objDiv.scrollHeight;

window.onscroll = function() {
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
if (scrollTop >=  div2 ) { 
  document.getElementById("copername").style.zIndex = "1"; 
  document.getElementById("copername").style.position = "fixed"; 

Answer 1

最简单的可能是使用 JS 来添加/删除通过滚动过去 div1 的 offsetHeight 触发的 .sticky 类：

window.onscroll = function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > document.getElementById("div1").offsetHeight ) {
    document.getElementById("div2").classList.add('sticky');
    document.getElementById("div3").style.marginTop = "600px";
  } else {
    document.getElementById("div2").classList.remove('sticky');
    document.getElementById("div3").style.marginTop = "0px";
  }
}

您还需要确保您的最后一个 #div3 在您的 CSS 中具有更高的 z-index 和绝对定位：

#div3 {
  z-index: 100;
  position: absolute;
  margin-top: 0px;
}

演示：JSFiddle

Answer 2

你可以试试这样的。我认为可以达到您想要的结果。

您可以从 div2 的 .offsetTop 中减去 window.pageYOffset。这是在滚动功能开始之前设置的。测试此表达式是否小于零，通过 JS 应用以下 css 样式：

div2.style.position = 'fixed'
div2.style.top = '0'; 
div3.style.position = 'absolute'
div3.style.zIndex = "-1";
return div3.style.marginTop = div2Height + "px"; 

否则应用此样式。

div2.style.position = 'relative'
div3.style.position = 'relative'
return div3.style.marginTop = 0;

var div2 =   document.getElementById('div2'),
    div2Pos = document.getElementById('div2').offsetTop,
    div2Height = document.getElementById('div2').offsetHeight,
    div3 = document.getElementById('div3');

document.addEventListener('scroll', function() {
  var windowPos = window.pageYOffset;

  if ((div2Pos-windowPos) < 0){
    div2.style.position = 'fixed'
    div2.style.top = '0'; 
    div3.style.position = 'absolute'
    div3.style.zIndex = "-1";
    return div3.style.marginTop = div2Height + "px";  
  }

  div2.style.position = 'relative'
  div3.style.position = 'relative'
  return div3.style.marginTop = 0;
});

div{
  height: 150px;
  width: 100%;
}

#div1{
  background: skyblue;
}

#div2{
  background: darkgrey;
}

#div3{
  background: steelblue;
  color: white;
  height: 3000px;
}

<div id="div1"><h1>Content</h1></div>
<div id="div2"><h1>Other Content</h1></div>
<div id="div3"><h1> Some more Content</h1></div>