headhesive.js創建一個按需顯示頭部。指定當你瀏覽器滾動到某個位置時顯示。
之前分享過兩個類似效果的特效：
jQuery -ScrollUpBar Plugin插件，滾動隱藏/回滾顯示
jQuery -下拉滾動隱藏/回滾顯示 - 特效代碼
本插件不需要給div加position: fixed; top:0; left:0;right: 0;
同時，也不需要依賴jQuery.js
使用方法：
Headhesive.js是沒有依賴關系一個獨立的JavaScript插件。
在你的頁面的頁腳包括headhesive.min.js并初始化它：
//創建Headhesive的一個新實例
var headhesive = new Headhesive('.header');
Styling Headhesive.jsHeadhesive.js不注入任何CSS樣式，這樣你就可以使用自己的完全控制您元素的樣式。
選項：
自定義Headhesive如何工作通過傳遞自定義選項。
// Options
var options = {
offset: 500
}//創建Headhesive的一個新實例，并傳遞一些選項
{
//滾動偏移量。接受號碼或“字符串”（類/ID）
offset: 300, // OR ― offset: '.classToActivateAt',
//自定義類
classes: {
//克隆ELEM類
clone: 'headhesive',
// Stick class
stick: 'headhesive--stick',
//取消置頂類
unstick: 'headhesive--unstick'
},
//滾動事件觸發每250ms的以獲得性能的提升
throttle: 250,
//回調
onInit: function() {},
onStick: function() {},
onUnstick: function() {},
onDestroy: function() {},
}下面是我測試過的頁面，包括js和css：
<!doctype html>
<html>
<head>
<meta charset="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>
<link rel="stylesheet" href="headhesive.css">
<script type="text/javascript" src="headhesive.min.js"></script>
</head>
<body>
<div class="nav" >
滾動顯示或隱藏的菜單文字、菜單文字、菜單文字
</div>
<div class="slider">
幻燈片區
</div>
<a id="showHere"></a>
<div class="text">
下拉測試文字
</div>
<script>
// Set options
var options = {
offset: '#showHere',
classes: {
clone: 'banner--clone',
stick: 'banner--stick',
unstick: 'banner--unstick'
}
};
// Initialise with options
var banner = new Headhesive('.nav', options);
// Headhesive destroy
// banner.destroy();
</script>
</body>
</html>打包下載，其中包含js和css文件：