建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:35收藏

简介


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


为网站设置sticky元素的JS库sticky js-示例图


特性:


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.  配置


OptionTypeDefaultDescription
data-sticky-wrapbooleanFALSEWhen
 it's true sticky element is wrapped in <span></span> which has sticky element dimensions. Prevents content from "jumping".
data-margin-topnumber0Margin
 between page and sticky element when scrolled
data-sticky-fornumber0Breakpoint
 which when is bigger than viewport width, sticky is activated and when is
 smaller, then sticky is destroyed
data-sticky-classstringnullClass added
 to sticky element when it is stuck



相关链接


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/