https://github.com/athm-fe/sticky
https://github.com/athm-fe/sticky
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/athm-fe/sticky
- Owner: athm-fe
- License: mit
- Created: 2018-04-13T08:19:52.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-17T10:19:58.000Z (about 8 years ago)
- Last Synced: 2025-02-12T11:44:55.117Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://athm-fe.github.io/sticky/
- Size: 8.79 KB
- Stars: 0
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Sticky
由于吸顶的实现采用的是 `position: fixed`，所以需要自己在样式里手动设置 `width` 。
## Usage
通过脚本来初始化，如果不配置参数，默认开启吸顶功能。
```javascript
$('.sticky-demo').sticky();
```
配置吸顶时到顶部的距离为 10px
```javascript
$('.sticky-demo').sticky({
offset: 10 // 开启吸顶，吸顶时到顶部距离为 10px
});
// or
$('.sticky-demo').sticky({
offsetTop: 10 // 开启吸顶，吸顶时到顶部距离为 10px
});
```
可以通过配置开启吸底效果
```javascript
$('.sticky-demo').sticky({
offsetBottom: 10 // 开启吸顶，吸顶时到顶部距离为 10px
});
```
还可以通过 HTML data 属性的方式配置参数
```html
吸顶，到顶部距离为 0
吸顶，到顶部距离为 10
吸顶，到顶部距离为 10
吸底，到底部距离为 10
吸顶和吸底效果同时开启
```
## Options
参数可以通过 data attributes 或者 JavaScript 两种方式来配置.
Name | Type | Default | Description
---- | ---- | ------- | -----------
offset | number or object | `{top:0}` | 用来设置吸顶和吸底的距离，格式 `{top: 10, bottom: 20}` ，其中 `top` 和 `bottom` 还可以是函数
offsetTop | number or function | 无 | 设置吸顶距离
offsetBottom | number or function | 无 | 设置吸底距离
## Methods
### `.sticky(options)`
初始化
```javascript
$('#stickyDemo').sticky();
```
## Events
Event Type | Description
---------- | -----------
top.fe.sticky | 进入吸顶状态时触发
bottom.fe.sticky | 进入吸底状态时触发
off.fe.sticky | 从吸顶或者吸底状态退出时触发
```javascript
$('.nav-example')
.on('top.fe.sticky', function() {
$(this).html('
吸顶状态
')
})
.on('bottom.fe.sticky', function() {
$(this).html('吸底状态
')
})
.on('off.fe.sticky', function() {
$(this).html('常规状态
')
});
```
# End
Thanks to [Bootstrap](http://getbootstrap.com/)