某些 DIV 后导航调整大小

Question

我正在建立一个个人网站，我想让我的导航在向下滚动后缩小。该网站由 4 div 组成，高度为 100%。现在我正在使用 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

如果您想在 window 的上边框与div 那么您可以将 shrink 变量值设置为 -

shrink = div.offsetTop;

然而，如果你想在穿过 div 之后缩小它，那么你可以将 shrink 的值设置为这个 -

shrink = div.offsetTop + div.offsetHeight

希望对您有所帮助！

某些 DIV 后导航调整大小

Navigation resize after certain DIV

html

javascript

css

navigation

jquery