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

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.js

Headhesive.js不注入任何CSS样式，这样你就可以使用自己的完全控制您元素的样式。

选项：

自定义Headhesive如何工作通过传递自定义选项。

// Optionsvar 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文件：

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！