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的{{1}}触发的offsetHeight类：

div1

您还需要确保您的上一个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"; } }在您的CSS中具有更高的z-index和绝对定位：

#div3

演示：JSFiddle

Answer 2

你可以尝试这样的事情。我认为这可以实现您正在寻找的结果。

您可以从div2的window.pageYOffset中减去.offsetTop。这是在滚动功能开始之前设置的。测试此表达式是否小于零，通过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>

div在另一个下面滚动一次到达页面上的一个点

2 个答案: