sticky

介绍

原生 JavaScript 实现的固定在顶部效果，兼容到 IE7+。

演示

https://hero3706.github.io/StickyHead/

兼容性

IE7+

依赖

原生 JavaScript 实现，无依赖。

下载

https://github.com/Hero3706/StickyHead.git

使用

<script src="path/sticky.js"></script>

或者

import Sticky from 'path/sticky.js'

示例

HTML 文件：

<div id="sticky"></div>

JavaScript 文件：

var sticky = new Sticky("#sticky");

API

初始化

var sticky = new Sticky("selector", options);

注意：当要兼容 IE7 的时候，不能传入选择符字符串，直接传入元素：

var stickyElem = document.getElementById("sticky");
var sticky = new Sticky(stickyElem)

options

1.offset

var sticky = new Sticky("#sticky", {
    // 表示距离顶部 20px 的时候就固定
    offset: 20
});

事件绑定

从未固定状态到固定状态的时候：

sticky.on("onStick", function() {
    console.log('固定在顶部')
})

从固定状态到未固定状态的时候：

sticky.on("onDetach", function() {
    console.log('取消固定在顶部')
})

如果希望事件只执行一次，可以使用 once 进行绑定

sticky.once("onStick", function() {
    console.log('固定在顶部')
})

类名

当固定在顶部的时候，会添加一个名为 sticky 的类名