javascript - 使用纯 javascript 修复窗口滚动上另一个容器内的容器

Question

我有一个容器thisSticks，我必须在另一个容器stickInContainer 中fix 滚动。基本上，复制 CSS sticky 行为。我本可以只使用 sticky，但它并不适用于所有浏览器。所以我用纯 javascript 制作它。

当前行为:在下面的演示中，灰色容器不应与蓝色footer 容器重叠，但确实如此。

预期行为:当 thisSticks 的底部到达 footer 的顶部时，它应该停留在那里，当用户向上滚动并到达顶部时thisSticks，它应该回到 stickInContainer 的顶部，直到到达其初始位置。

我可以想到在 thisSticks 底部到达 footer 顶部后每次滚动时递增 stickyDiv.style.bottom。

这将如何工作，还有其他方法吗？

window.onscroll = function() {
  myFunction();
}

const stickyDiv = document.getElementById('thisSticks');

const stickyDivHeight = stickyDiv.offsetTop;

function myFunction() {
  if (window.pageYOffset > stickyDivHeight) {
    stickyDiv.style.position = 'fixed';
    stickyDiv.style.top = 0;
  } else {
    stickyDiv.style.position = 'initial';
  }
}

#topSection {
  height: 100px;
}

#stickInContainer {
  height: 800px;
}

#thisSticks {
  width: 100%;
  height: 40px;
  opacity: 0.7;
  background-color: grey;
}

#footer {
  width: 100%;
  background-color: blue;
  height: 500px;
}

<div id='topSection'>Top Section</div>
<div id='stickInContainer'>
  <div id='thisSticks'></div>
</div>
<div id='footer' />

Answer 1

您可以添加另一个条件来测试页脚何时到达顶部减去粘性元素的高度。如果是这种情况，您可以以不同的方式更改 top:

window.onscroll = function() {
  myFunction();
}

const stickyDiv = document.getElementById('thisSticks');
const footer = document.getElementById('footer');

const stickyDivHeight = stickyDiv.offsetTop;
const Height = stickyDiv.clientHeight; /*height of the sticky element*/

const footerHeight = footer.offsetTop; /*footer offset*/

function myFunction() {
  if (window.pageYOffset > stickyDivHeight ) {
    stickyDiv.style.position = 'fixed';
    stickyDiv.style.top = 0;
  } else {
    stickyDiv.style.position = 'initial';
  }
  
  /*Here the sticky will touch the footer and top will be negative*/
  if(window.pageYOffset>(footerHeight - Height)) {
    stickyDiv.style.top = (footerHeight - Height)-window.pageYOffset + "px";
  }
}

#topSection {
  height: 100px;
}

#stickInContainer {
  height: 800px;
}

#thisSticks {
  left:0;
  right:0;
  height: 40px;
  opacity: 0.7;
  background-color: grey;
}

#footer {
  background-color: blue;
  height: 500px;
}
body {
 margin:0;
}

<div id='topSection'>Top Section</div>
<div id='stickInContainer'>
  <div id='thisSticks'></div>
</div>
<div id='footer' ></div>