不依赖jQuery滚动弹出顶部导航插件headhesive.js

《不依赖jQuery滚动弹出顶部导航插件headhesive.js》正文开始，本次阅读大概6分钟。

headhesive.js创建一个按需显示头部。指定当你浏览器滚动到某个位置时显示。

之前分享过两个类似效果的特效：

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如何工作通过传递自定义选项。

//Options
varoptions={
offset:500
}

//创建Headhesive的一个新实例，并传递一些选项
{
//滚动偏移量。接受号码或“字符串”（类/ID）
offset:300,//OR―offset:.classToActivateAt,
//自定义类
classes:{
//克隆ELEM类
clone:headhesive,
//Stickclass
stick: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=stylesheethref=headhesive.css
scripttype=text/javascriptsrc=headhesive.min.js/script
/head
body
divclass=nav
滚动显示或隐藏的菜单文字、菜单文字、菜单文字
/div
divclass=slider
幻灯片区
/div
aid=showHere/a
divclass=text
下拉测试文字
/div
script
//Setoptions
varoptions={
offset:#showHere,
classes:{
clone:banner--clone,
stick:banner--stick,
unstick:banner--unstick
}
};
//Initialisewithoptions
varbanner=newHeadhesive(.nav,options);
//Headhesivedestroy
//banner.destroy();
/script
/body
/html

打包下载，其中包含js和css文件：

滚动弹出顶部导航插件headhesive.js.zip