滚动到下一个div时更改位置？

Question

以下JavaScript似乎运行良好，直到我发现div的高度（id =“ fixed”）对于所有页面都不相同。

<script>
  window.addEventListener("scroll", function() {
    if (window.scrollY >= 450) {
      document.getElementById('fixed').style.position = 'relative';
    }
    if (window.scrollY <= 450) {
      document.getElementById('fixed').style.position = 'fixed';
    }
  });
</script>

因此，我想对它进行调整，使div的位置只要滚动到id =“ next-to-fixed”的下一个div中，就可以更改。

我看到了另一篇文章，该文章为此实现了jQuery，但我只想使用简单的JavaScript，因此，如果有人可以通过实现此目的的方式说明我，那将是非常不错的。

试用：

  <script>
  window.addEventListener("scroll",function() {
  var elm1 = document.getElementById('product-essential');
  if(window.scrollY >= elm1.clientHeight) {
  document.getElementById('fixed').style.position = 'relative';
  }
  if(window.scrollY <= elm1.clientHeight) {
  document.getElementById('fixed').style.position = 'fixed';
  }
  }
  );
  </script>

Answer 1

这是您如何读取div的height的方法：

var clientHeight = document.getElementById('myDiv').clientHeight;

从这里开始使用clientHeight 。