使用纯JavaScript

Question

我有一个容器thisSticks，我必须fix在另一个容器stickInContainer上滚动。基本上，复制CSS sticky的行为。我本可以使用sticky，但并非在所有浏览器中都可以使用。所以我是用纯JavaScript制作的。

当前行为：在下面的 demo 中，灰色容器不应与蓝色footer容器重叠，但可以重叠。

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

我可以考虑在stickyDiv.style.bottom的底部到达thisSticks的顶部之后，每次滚动增加footer。

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

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>

Answer 2

您需要另一个条件来检查它是否达到了stickInContainer的底部。您可以通过不同的方法来实现此目的，可以检查提到的样式底部，也可以检查页脚顶部，但是由于您有容器，因此我更喜欢以下方法。

我通过定义一个指向容器底部的限制来编辑您的代码 var stickyLimit = stickyDivContainer.offsetHeight + stickyDivContainer.offsetTop - stickyDiv.offsetHeight

并将条件添加到您的if块中，以使stickyDiv停止并在那里等待。

  else if(window.pageYOffset>=stickyLimit ){
    stickyDiv.style.position = 'static';
    stickyDiv.style.top = stickyLimit;
  }

我希望这是您要寻找的东西，我也建议对stickyDiv进行一些过渡效果，以更改其位置行为，因为从偏移量值检查滚动并更改位置样式并不容易

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

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

const stickyDivContainer = document.getElementById('stickInContainer');

const stickyDivHeight = stickyDiv.offsetTop;

function myFunction() {

  var stickyDivBottom = stickyDiv.scrollTop + stickyDiv.offsetHeight;
  var stickyLimit = stickyDivContainer.offsetHeight + stickyDivContainer.offsetTop  - stickyDiv.offsetHeight;

  if (window.pageYOffset > stickyDivHeight && window.pageYOffset<stickyLimit ) {
    stickyDiv.style.position = 'fixed';
    stickyDiv.style.top = 0;
  }else if(window.pageYOffset>=stickyLimit ){
    stickyDiv.style.position = 'static';
    stickyDiv.style.top = stickyLimit;
  }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' />