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

所属分类:UI-滚动

 36059  387  查看评论 (0)
分享到微信朋友圈
X
滚动弹出顶部导航插件headhesive.js ie兼容9

headhesive.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() {},
}
相关插件-滚动

双向垂直上下滚动

垂直滚动插件,可切换向上或向下方向滚动。
  滚动
 46373  374

jQuery上下左右滚动插件rollSlide.js

实现上下左右自动滚动、无缝滚动
  滚动
 67656  557

锚点,可以扩展很多功能

锚点定位,代码实现简单,无依赖其它插件
  滚动
 22783  342

jQuery电商网站楼层滚动定位

jQuery电商网站楼层滚动定位
  滚动
 55139  628

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复