导航菜单栏随滚动条向上滚动时显示向下时隐藏
发布于
by
为了给浏览页面的用户提供更快捷、方便的导航，很多网站都提供了导航菜单栏随滚动条上下滚动的做法，以减少用户不必要…
为了给浏览页面的用户提供更快捷、方便的导航，很多网站都提供了导航菜单栏随滚动条上下滚动的做法，以减少用户不必要的操作来提高网站用户粘度。
并且很多的网站把导航条固定在网页的顶上，这样虽然好看，但是有的时候我们要在页面上呈现很多东西的时候，我们就会觉得固定在顶部的导航条是多余的。
这个时候，我们就可以通过本文的方法（使用headroom.js），使我们的网页在向下方滚动的时候，顶部的导航条会自动收起来（隐藏）；网页在向上方滚动的时候，顶部的导航条再自动出现（显示）。这样就能给我们的页面更多的空间，视野更加开阔。相应效果请滑动本页观察本站导航栏的变化！
headroom.js 的工作原理是：通过感应目标元素不同的 3 种状态（原始，下滚，上滚），为目标元素更改相应的 class，通过相应的 class 的 css 样式的变化得到所要的效果。
下面龙笑天下就介绍实现方法：
首先，在 footer 中加载下面的 js：
<!-- 智能显示隐藏导航栏 https://www.ilxtx.com/auto-hide-navbar.html -->
<script type="text/javascript" src="https://npmcdn.com/headroom.js@0.9.3/dist/headroom.min.js"></script>
<script>
(function() {
new Headroom(document.querySelector("#nav-scroll"), { //这里的 nav-scroll 改为你的导航栏的 id 或 class
offset : 5, // 在元素没有固定之前，垂直方向的偏移量（以 px 为单位）
tolerance: 5, // scroll tolerance in px before state changes
classes: {
initial: "animated", // 当元素初始化后所设置的 class
pinned: "slideUp", // 向上滚动时设置的 class
unpinned: "slideDown" // 向下滚动时所设置的 class
}
}).init();
}());
</script>然后，加上样式就 over 了：
.animated {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.animated.slideDown {top: -100px;}
.animated.slideUp {top: 0;}其中的 class 要与上面 js 中的相对应！
参考资料：
github 中的源代码
headroom.js 官网
headroom.js 中文官网
简书 headroom.js
WickyNilliams headroom.js
类别：WordPress函数讲解、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
还没有任何评论，赶紧来占个楼吧！