javascript - 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 添加/删除 .sticky 类，该类通过滚动经过 div1 的 offsetHeight 触发:

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