为网站设置sticky元素的JS库sticky js

简介

Sticky-js是一个用vanilla javascript编写的sticky元素库。有了这个库，你可以很容易地在你的网站上设置sticky元素。它的反应也很灵敏。

特性：

1）用普通javascript编写，不需要依赖项

2）轻量级  (minified: ~6.08kb, gzipped: ~1.67kb)

3）它可以粘贴到整个页面或选定的父容器

4）不需要额外的CSS

使用

1.  引入文件

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

2.  HTML

<div class="selector">Sticky element</div>

3.  调用

用 javascript 初始化

<script>
  var sticky = new Sticky('.selector');
</script>

Syntax

new Sticky([selector:string], [global options:object])

CommonJS

var Sticky = require('sticky-js');

var sticky = new Sticky('.selector');

4.  示例

<div class="row" data-sticky-container>
  <div class="medium-2 columns">
    <img src="http://placehold.it/250x250" class="sticky" data-margin-top="20" data-sticky-for="1023" data-sticky-class="is-sticky">
  </div>
  <div class="medium-8 columns">
    <h1>Sticky-js</h1>
    <p>Lorem ipsum.....</p>
  </div>
  <div class="medium-2 columns">
    <img src="http://placehold.it/250x250" class="sticky" data-margin-top="20" data-sticky-for="1023" data-sticky-class="is-sticky">
  </div>
</div>

<script src="sticky.min.js"></script>
<script>
  var sticky = new Sticky('.sticky');
</script>

5.  配置

相关链接

Github  地址 ： https://github.com/rgalus/sticky-js

npm 地址 ：  https://www.npmjs.com/package/sticky-js/v/1.0.0

效果演示及文档 ：  https://rgalus.github.io/sticky-js/