为了给浏览页面的用户提供更快捷、方便的导航,很多网站都提供了导航菜单栏随滚动条上下滚动的做法,以减少用户不必要的操作来提高网站用户粘度。

并且很多的网站把导航条固定在网页的顶上,这样虽然好看,但是有的时候我们要在页面上呈现很多东西的时候,我们就会觉得固定在顶部的导航条是多余的。

这个时候,我们就可以通过本文的方法(使用headroom.js),使我们的网页在向下方滚动的时候,顶部的导航条会自动收起来(隐藏);网页在向上方滚动的时候,顶部的导航条再自动出现(显示)。这样就能给我们的页面更多的空间,视野更加开阔。相应效果请滑动本页观察本站导航栏的变化!

headroom.js的工作原理是:通过感应目标元素不同的3种状态(原始,下滚,上滚),为目标元素更改相应的class,通过相应的class的css样式的变化得到所要的效果。

下面chrafz就介绍实现方法:

第一种方式(推荐)

首先,在footer中加载下面的js:

然后,加上样式就over了:

其中的class要与上面js中的相对应!

第二种方式

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

其中,第一个jquery一般wordpress主题都带有了就可以不必再加载了;.navbar-fixed-top为导航栏的class(也可以是id)。

然后,在引入css就ok了:

下面再给个具体的例子,用editplus或其它编辑器保存为html网页,双击即可看效果。

参考资料:

github中的源代码
headroom.js官网
headroom.js中文官网
简书headroom.js