sticky-js是一款js固定元素插件。sticky-js插件可以使页面DOM元素固定在某个位置,不随页面的滚动而滚动。

安装

可以通过npm或bower来安装sticky-js插件。

npm install sticky-js
bower install sticky.js               
                

使用方法

在页面中引入sticky.min.js文件。

<script src="sticky.min.js"></script>
                
HTML结构

例如,要让一个<div>元素固定在页面上。

<div class="selector">固定元素</div>
                
初始化插件

然后通过下面的方法来初始化该js固定元素插件。

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

语法为:

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

方法

sticky-js插件的可用方法有:

当父容器的高度改变时,更新sticky。

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

// and when parent change height..
sticky.update();          
                

销毁sticky元素。

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

sticky.destroy();      
                

配置参数

sticky-js插件的可用配置参数有:

参数 类型 默认值 描述
data-sticky-wrap boolean false 设置为true时,sticky元素会被包裹在<span></span>中。
data-margin-top number 0 当页面滚动时,固定元素和页面之间的距离。
data-sticky-for number 0 当Breakpoint 比页面视口宽度大时,sticky被激活,反之,sticky 被销毁。
data-sticky-class string null 添加到sticky元素上的class类。

sticky-js固定元素插件的github地址为:https://github.com/rgalus/sticky-js