导航栏自动显示隐藏代码一
青锋建站给大家分享的一种简单实用的使用JS原生设计的实现网站顶部自动显示隐藏的代码，优点是体积小，只有几行代码，缺点是没有专业的JQ或headroom.js实现的那么绚丽。但通过配合CSS3也可以实现得不错。function hidden_nav()
{
var hand=document.getElementById("for_nav");
var navHeight=hand.offsetHeight;
var curY=document.documentElement.scrollTop;
if(curY > navHeight)
{
hand.style.position="fixed";
}
if(curY < navHeight+80)
{
hand.style.position="relative";
}
}//将这段JS代码放在HTML文件中，或单独放在一个JS文件中加载
使用上述的顶部导航栏自动显示隐藏代码时需要配合HTML中的行内样式和ID来实现，说明如下：在body标签中添加事件代码onmousemove="hidden_nav();"；在导航栏所在的div标签中添加样式和IDstyle="position:relative;z-index:900;" id="for_nav"。全部代码如下：
<body onmousemove="hidden_nav();">
<div style="position:relative;z-index:900;" id="for_nav">
导航栏自动显示隐藏代码二
在这里我们使用CSS的position来实现，给导航栏添加类名<div class="channel">，然后在CSS新式表中添加样式：.channel{postion:fixed;top:0}来实现，这种方式直接将网站顶部导航栏置顶，不存在滑过一定距离再显示出来。但是优势却是实现简单，速度快，如果网站不是使用特效多，以SEO为主的网站推荐使用。导航栏自动显示隐藏代码三
使用一款专业的网站顶部导航栏特效插件headroom.js来实现，它的作用是为页面顶部多留些空间。在不需要页头时将其隐藏。Headroom.js 是什么？
Headroom.js 是一个轻量级、高性能的JS小工具（不依赖任何工具库！），它能在页面滚动时做出响应。此页面顶部的导航条就是一个鲜活的案例，当页面向下滚动时，导航条消失，当页面向上滚动时，导航条就出现了。
Headroom.js 有什么用？
固定页头（导航条）可以方便用户在各个页面之间切换。但是这也会带来些问题… 大屏幕一般都是宽度大于高度的，也就是说屏幕高度要少一些。固定页头会占用一部分本来可以用于展示内容的区域。小屏幕一般是高度较大，但是别忘了，屏幕本来就小，页头再占用一部分的话，屏幕可用于展示内容的区域当然还是少。
Headroom.js 能帮你把不需要的页面元素在合适的时间展示出来，让用户花更多时间关注你页面上的内容。
Headroom.js 用法
使用 headroom.js 是很简单的。它提供了简单的 JS API，另外，还可以作为 jQuery/Zepto 插件使用。
纯JS调用方式
// 获取页面元素
var myElement = document.querySelector("header");
// 创建 Headroom 对象，将页面元素传递进去
var headroom = new Headroom(myElement);
// 初始化
headroom.init();
以 jQuery/Zepto 插件形式调用
// 是不是很简单！
// 注意： init() 默认在插件内部被调用了
$("#header").headroom();
了解更多Headroom.js，可以参见原网站http://www.bootcss.com/p/headroom.js/
以上就是青锋建站给大家分享的三种实现网站顶部导航自动显示隐藏的特效代码，当然最好的一定是最浪费性能的，大家可以根据自己需求来使用。青锋建站，提供专业的高品质网站制作服务，包括网站建设，SEO，网络营销，面向CMS建站开发，PHP原生开发，基于YII框架的系统开发。
转载请注明来源网址：青锋建站-http://www.sjzphp.com/code/headroom_js_871.html
