位置：广州松河 > 技术支持 > 不依赖jQuery滚动弹出顶部导航插件headhesive.js_js/jQuery

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

来源：网络整理时间：2023/3/4 1:05:04 共 3617 浏览

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

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

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

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jquery全屏响应式轮播图插件jquery.flexslider.js_js/jQuery | ·下一条：CSS3圆圈动画放大缩小循环动画效果_CSS学习