Javascript 向下滚动时显示导航

我试图实现的是，当一个页面向下滚动时，导航就会被隐藏，就像它在屏幕顶部消失一样。当用户向上滚动页面时，导航将再次滑入视图。同样，如果再次向下滚动，它将隐藏

我为此尝试了一些不同的插件，它们几乎可以正常工作。我现在正在看的是“jquery导航”

链接： 例如：

这几乎达到了我想要的效果。一旦脚本处于“活动”状态，就可以使用某些类。因为我只想在脚本处于“活动”状态时添加背景色。因此，它将是透明的，直到导航离开屏幕而不在顶部

另外，我知道，如果你向上滚动这个导航栏，使一半的导航栏在视图中，它会快速调整，这样你就可以看到整个导航栏。但是我很喜欢它只显示你浏览过的内容。因此，如果导航高度为100px，滚动30px，则只能看到条形图底部的30px。向下滚动会一个像素一个像素地再次隐藏该条-这有意义吗

因此，这些步骤将是（如果这更清楚的话）：

页眉位于页面顶部，透明背景

向下滚动时，导航会逐像素离开屏幕

当用户向后滚动时，标题开始再次显示其自身-这一次是有背景色的

一旦标题再次点击浏览器顶部，背景将被删除

我的标记非常简单。当导航处于隐藏状态时，该栏仅保留徽标和导航切换，直到单击切换，显示导航全屏

<header class="page-head">

    <a href="#" class="page-head__home-link"></a>

    <a href="#" class="page-head__toggle"><span>Menu</span></a>

    <nav class="site-nav">
        <ul class="site-nav__list">
            <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
        </ul>
    </nav>

</header>

我已经删除了

page-head\uuu home-link中的SVG，否则它将是一堵代码墙

希望有人能帮上忙：）
不用jquery或库，您就可以轻松完成这项工作。您只需观察滚动事件，当方向改变时，将标题放置在视野上方，然后在继续滚动时，确保它不会离开父容器的顶部


var主体、方向、边距、页眉、页眉高度、滚动；
body=document.getElementById（'tall'）；
滚动=0；
方向=零；
pageHead=document.getElementsByClassName（'page-head'）[0]；
pageHeadHeight=pageHead.offsetHeight-1；
保证金=0；
body.addEventListener（“滚动”），函数（事件）{
如果（滚动正文.滚动顶部）{
边距=body.scrollTop；
}
pageHead.style['margin-top']=margin+'px'；
}
return scrolled=body.scrollTop；
});
.toll{
背景颜色：蓝色；
最小高度：3000px；
最小宽度：100%；
}
#高大的{
最大高度：180像素；
边框：3倍纯红；
溢出：自动；
}
.页眉{
颜色：白色；
显示：内联块；
}
a{
颜色：白色；
}








使用动画获得效果，并将其与Scroll关联感谢您的回复。我现在不能检查，但它看起来很棒！我看到我还需要一些课程。默认情况下，标题是透明的，但如果它进入页面下方的视图，它将具有
背景色。一旦它返回顶部，背景将再次移除。我在这里尝试了使用不同的插件（headloom.js），但是将
位置：absolute
更改为
fixed
会导致一些问题，而且有点笨重：