之前分享过两个类似效果的特效：
jQuery -ScrollUpBar Plugin插件，滚动隐藏/回滚显示
jQuery -下拉滚动隐藏/回滚显示 – 特效代码
本插件不需要给div加position: fixed; top:0; left:0;right: 0;
同时，也不需要依赖jQuery.js
使用方法：
Headhesive.js是没有依赖关系一个独立的JavaScript插件。
在你的页面的页脚包括headhesive.min.js并初始化它：
//创建Headhesive的一个新实例varheadhesive=newHeadhesive(.header);StylingHeadhesive.js
Headhesive.js不注入任何CSS样式，这样你就可以使用自己的完全控制您元素的样式。
选项：
自定义Headhesive如何工作通过传递自定义选项。
//Optionsvaroptions={offset:500}
//创建Headhesive的一个新实例，并传递一些选项{//滚动偏移量。接受号码或“字符串”（类/ID）offset:300,//OR―offset:.classToActivateAt,//自定义类classes:{//克隆ELEM类clone:headhesive,//Stickclassstick:headhesive--stick,//取消置顶类unstick:headhesive--unstick},//滚动事件触发每250ms的以获得性能的提升throttle:250,//回调onInit:function(){},onStick:function(){},onUnstick:function(){},onDestroy:function(){},}
下面是偶测试过的页面，包括js和css：
<!doctypehtml><html><head><metacharset="utf-8"><title>不依赖jQuery滚动弹出顶部导航插件headhesive.js</title><style>*{padding:0;margin:0;text-align:center}.top{width:100%;background-color:#c95a5d}.nav{width:100%;background-color:#f30;color:#fff;font-size:24px;padding:5px;/*transition:top.5s;*/}.slider{width:100%;height:300px;line-height:300px;font-size:42px;background-color:#E57403;color:#fff;}.text{width:100%;height:400px;line-height:400px;}</style><linkrel="stylesheet"href="headhesive.css"><scripttype="text/javascript"src="headhesive.min.js"></script></head><body><divclass="nav">滚动显示或隐藏的菜单文字、菜单文字、菜单文字</div><divclass="slider">幻灯片区</div><aid="showHere"></a><divclass="text">下拉测试文字</div><script>//Setoptionsvaroptions={offset:#showHere,classes:{clone:anner--clone,stick:anner--stick,unstick:anner--unstick}};//Initialisewithoptionsvarbanner=newHeadhesive(.nav,options);//Headhesivedestroy//banner.destroy();</script></body></html>
打包下载，其中包含js和css文件：
滚动弹出顶部导航插件headhesive.js.zip
