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

CSS position: sticky 的JS补丁插件stickyfill.js

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

简介


CSS粘性位置sticky的Polyfill :stickyfill.js。支持顶部位置附着,可在IE9+以上使用。


主要作用:

1.  支持顶部位置的 sticky

2.  支持 IE9+

3.  模拟原始 position: sticky 行为:

(1)  使用父节点作为边界 box

(2) 在水平页面滚动时表现良好

(3) 仅适用于明确顶部的元素

(4) 模拟 native top 和 margin-bottom 行为


使用

1.  引入文件


<script src="path/to/stickyfill.min.js"></script>


2.  HTML


<div class="sticky">    ...</div>

[CSS]
.sticky {position: -webkit-sticky; position: sticky;top: 0;}


3.  调用

JS方式


var elements = document.querySelectorAll('.sticky');
Stickyfill.add(elements);


JS + jQuery 方式


var elements = $('.sticky');
Stickyfill.add(elements);


同样值得进行清理(clearfix):


.sticky:before,
.sticky:after {
    content: '';
    display: table;
}



相关链接


文档地址 :https://www.worldlink.com.cn/zh_tw/osdir/stickyfill.html

GitHub 地址 :https://github.com/wilddeer/stickyfill