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

您可以使用

shrinkOn = firstDiv.clientHeight

Answer 2

如果要在窗口的顶部边框触及offsetTop的顶部边框时缩小导航，可以使用div获取div的y坐标您可以将shrink变量值设置为 -

shrink = div.offsetTop;

但是如果你想在越过div之后缩小它，那么你可以将shrink的值设置为此 -

shrink = div.offsetTop + div.offsetHeight

希望它有所帮助！

某些DIV后导航会调整大小

2 个答案: