zdddrszj/sticky-polyfill

position:sticky的兼容实现库

sticky-polyfill

css position:sticky的兼容实现库。
如果浏览器支持则使用浏览器实现，如果不支持则采用监听scroll+position:fixed实现。
核心算法依赖element.getBoundingClientRect()

用法

1、引入js

<script type="text/javascript" src="sticky-polyfill.js"></script>

支持AMD require语法

2、配置参数

<script type="text/javascript">
    /**
     * StickyPolyFill.polyfill();
     * 跟下面的写法是等价
     */
    StickyPolyFill.polyfill({
        className: 'sticky-polyfill',
        top: '0px',
        bottom: '',
        zIndex: '1'
    });

    /**
     * 可以多次配置自定义参数来增加sticky类型
     */
    StickyPolyFill.polyfill({
        className: 'my-sticky-bottom',
        top: '',
        bottom: '0px',
        zIndex: '1'
    });
</script>

3、在需要的element上应用第2步的className

<section class="sticky-polyfill">
    <span>sticky-top</span>
</section>


<div class="my-sticky-bottom">
    <span>sticky-bottom</span>
</div>

参考文献

MDN-position
CSS “position: sticky” – Introduction and Polyfills