Jquery 如何缩小页眉'；滚动时的导航？

所以我一直在努力实现的是缩小滚动时的“导航”。现在，我有一个由两部分组成的导航栏。上半部分在向下滚动时消失，在向上滚动时重新出现。底部始终可见，整个导航固定在顶部

我的问题是，当向下滚动时，上导航区内的内容消失了，而不是整个导航区随下导航区一起向上移动

以下是一些图片： 前后

代码如下：

<header>
 <div id="vp-nav" class="fixed-top">
  <nav class="container" id="nav-Upper">
   <div class="zeroed navbar pt-2">
    <a href="#" class="navbar-brand">Project one</a>
    <a><i href="#" class="fa fa-podcast fa-2x mr-auto" aria-hidden="true"></i></a>
   </div>
  </nav>
  <div id="nav-Lower" class="text-center scrollmenu">
   <a href="#">Tag one</a>
   <a href="#news">Tag two</a>
   <a href="#contact">Tag three</a>
   <a href="#voice">Tag four</a>
   <a href="#about">Tag five</a>
   <a href="#home">Tag six</a>
   <a href="#news">Tag seven</a>
  </div>
 </div>
</header>

<style>
   nav {
    width: 100%;
    top: 0;
    text-align: center;
    transition: all 0.5s ease;
   }

   nav.hidden {
    transform: translate3d(0,-100%,0);
   }
</style>

<script type="text/javascript">

            (function() {
                var documentElem = $(document),
                    nav = $('nav'),
                    lastScrollTop = 0;

                documentElem.on('scroll', function() {
                    var currentScrollTop = $(this).scrollTop();

                    if ( currentScrollTop > lastScrollTop ) 
                        nav.addClass('hidden'); //scroll down
                    else 
                        nav.removeClass('hidden'); //scroll up

                    lastScrollTop = currentScrollTop;
                });



            })();
        </script>

导航{
宽度：100%；
排名：0；
文本对齐：居中；
过渡：所有0.5s缓解；
}
导航隐藏{
变换：translate3d（0，-100%，0）；
}
（功能（）{
var documentElem=$（文档），
资产净值=$（“资产净值”），
lastScrollTop=0；
documentElem.on（'滚动'，函数（）{
var currentScrollTop=$（this.scrollTop（）；
如果（currentScrollTop>lastScrollTop）
nav.addClass（'hidden'）；//向下滚动
其他的
nav.removeClass（'hidden'）；//向上滚动
lastScrollTop=currentScrollTop；
});
})();

我用您的代码创建了一支笔，我认为问题在于您将转换应用于导航，而不是#vp导航。试试这个CSS和JS（HTML不变）

---

看。（导致下面讨论并提示进行此编辑的早期钢笔位于：）

Close！这会使整个“vp nav”消失。我的目标只是让“导航上限”消失，而“文本中心”和“滚动菜单”类的div向上移动并被修复……谢谢你的帮助！编辑：我添加了一个'id'的'nav Lower'。我试图让这个div在任何时候都可见，它只是在页面滚动时向上移动/“nav-Upper”消失。我添加了一个背景色：红色到#vp nav（再次参见代码笔），只有导航的顶部消失。所以，我不是不太了解你看到了什么，就是你的CSS——基于你的截图——比你在作品中提供的内容更复杂。很高兴它能帮上忙！在看了一会儿之后，我意识到你的代码笔在“vp nav”上面有一个边距，而我的代码笔完全在顶部。当我滚动代码时，一切都消失了。但当我添加了一些像素的边缘时，其中一些被显示出来了！我们在早期的Codepen中得到了一个很好的结果，因为#nav Upper的高度与页面上的上边距匹配。在这种情况下，这里有一个更新的笔，它可以处理#nav Upper:中任何大小的内容。注意，它使用CSS而不是类来控制转换，因为我们需要它是动态的。有其他方法可以做到这一点，但也许这就足够了？如果这对你有效，我会更新上面的答案供其他人参考。

*** CSS ***

#vp-nav {
  position: fixed;
  transition: all 0.5s ease;
  background-color: red;
  top: 0;
}

#nav-Upper {
  font-size: 100px;  /* For example */
}

nav {
  width: 100%;
  top: 0;
  text-align: center;
  background-color: grey;
}


*** JS ***

(function() {
  var documentElem = $(document),
      nav = $('nav'),
      lastScrollTop = 0,
      navUpperHeight = $('#nav-Upper').outerHeight();

  documentElem.on('scroll', function() {

    var currentScrollTop = $(this).scrollTop();
    if ( currentScrollTop > lastScrollTop ) 
      $('#vp-nav').css('top', '-' + navUpperHeight + 'px'); //scroll down
    else 
      $('#vp-nav').css('top',0); //scroll up

    lastScrollTop = currentScrollTop;
  });
})();