在大部分导航菜单在顶部的网站都会采用固定的形式,不管页面怎么滚动,菜单始终会固定在顶部。
而下面这个方法比较灵活,当你向下滚动页面时,导航菜单是不固定的,当你向上滚动时导航菜单就会显示出来了。这个效果在Bigfa的站里面也用上了,可以点击去看看。下面是实现方法,非常简单。

步骤一

加载jQuery库(一般现在的主题都已经有了,没有的话按下面第一行来挂载)和scroll-up-bar.min.js脚本到你的页面,
scroll-up-bar.min.js 是控制脚本,实施效果就靠它,具体参数也可以在脚本里面修改。

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="scroll-up-bar.min.js"></script>

步骤二

为你的导航菜单添加固定顶部的样式;比如你的导航DIV是下面这样的,那么css可以按下面的样式在原有基础上加进去。
下面以id为“navbar”为例:(加了position:fixed之后一般导航下面的主体会跑到顶部上来,可以再修改其边距进行适当调整)

<div id="navbar" style="position: fixed; top: 0; left: 0; right: 0; width: 100%;">
<ul>
<li></li>
……
</ul>
</div>

步骤三

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

<script>
$('#navbar').scrollupbar();
</script>

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