html 滚动隐藏导航,[jQuery]滚动隐藏或显示顶部导航菜单

现

在大部分导航菜单在顶部的网站都会采用固定的形式，不管页面怎么滚动，菜单始终会固定在顶部。

而下面这个方法比较灵活，当你向下滚动页面时，导航菜单是不固定的，当你向上滚动时导航菜单就会显示出来了。这个效果在Bigfa的站里面也用上了，可以点击去看看。下面是实现方法，非常简单。

步骤一

加载jQuery库(一般现在的主题都已经有了，没有的话按下面第一行来挂载)和scroll-up-bar.min.js脚本到你的页面，

scroll-up-bar.min.js 是控制脚本，实施效果就靠它，具体参数也可以在脚本里面修改。

步骤二

为你的导航菜单添加固定顶部的样式；比如你的导航DIV是下面这样的，那么css可以按下面的样式在原有基础上加进去。

下面以id为“navbar”为例：(加了position:fixed之后一般导航下面的主体会跑到顶部上来，可以再修改其边距进行适当调整)

• ……

步骤三

最后是调用脚本里的scrollupbar()函数，相当于一个钩子：

$('#navbar').scrollupbar();

动手试试看 你会发现很简单，下面是演示页面：