javascript - 导航在特定 DIV 后调整大小

Question

我正在构建一个个人网站，我想让我的导航在向下滚动后缩小。该网站由 4 个 100% 高度的 div 组成。现在我正在使用JS，即在300px滚动后缩小导航:

 <script>
   function init() {
     window.addEventListener('scroll', function(e){
          var distanceY = window.pageYOffset || document.documentElement.scrollTop,
              shrinkOn = 300,
              header = document.querySelector("header");
          if (distanceY > shrinkOn) {
              classie.add(header,"smaller");
          } else {
              if (classie.has(header,"smaller")) {
                  classie.remove(header,"smaller");
              }
          }
      });
  }
  window.onload = init();
</script>

我的问题是如何使导航在第一个 div 之后缩小？

Answer 1

如果你想在窗口的上边框接触到窗口的上边框时缩小导航，可以使用 offsetTop 来获取 div 的 y 坐标div 然后您可以将 shr​​ink 变量值设置为 -

shrink = div.offsetTop;

但是，如果您想在跨越 div 后缩小它，那么您可以将 shr​​ink 的值设置为此 -

shrink = div.offsetTop + div.offsetHeight

希望对你有帮助!