JavaScript 实现导航菜单栏向下滚动隐藏向上滚动显示

更新于2018-06-16,如已失效请联系!
为了给浏览页面的用户提供更快捷、方便的导航,很多网站都提供了导航菜单栏随滚动条上下滚动的做法,以减少用户不必要的操作来提高网站用户粘度。并且很多的网站把导航条固定在网页的顶上,这样虽然好看,但是有的时候我们要在页面上呈现很多东西的时候,我们就会觉得固定在顶部的导航条是多余的。
这个时候,我们就可以通过本文的方法(使用headroom.js),使我们的网页在向下方滚动的时候,顶部的导航条会自动收起来(隐藏);网页在向上方滚动的时候,顶部的导航条再自动出现(显示)。这样就能给我们的页面更多的空间,视野更加开阔。相应效果请滑动本页观察本站导航栏的变化!headroom.js 封装原理是通过感应目标元素不同的3种状态(原始,下滚,上滚),为目标元素更改相应的class,通过相应的class的css样式的变化得到所要的效果。

方法Ⅰ

在 WordPress 主题的页脚文件中引入headroom.js:

然后加上对应样式就完美运行:

注意:其中的 class 要与上面 js 需要一一对应
如果是Dux主题的话,需要主题 margin-top 对应的 px 值,需要更改【可联系root@laomo.io解答】

方法Ⅱ

首先依次引入下面4个js,注意顺序,严格遵守!

其中,jquery是 WP主题都会自带就可以不必再加载;.navbar-fixed-top为导航栏的class(也可以是id),需要自行更改
然后加上对应样式就完美运行:

相关文章

参与评论