hc-sticky - 一款可以轻松实现网页滚动元素固定的jQuery插件
  • 分享到微信朋友圈
    X
立即下载 查看演示

hc-sticky 可以当页面滚动的时候让页面上的某一元素固定在窗口上的某一位置。可以跨浏览器使用，有js版本和jquery版本。

使用方法：

在head部分引用hc-sticky.js文件

<script src="js/hc-sticky.js"></script>

插件初始化：

js版本

<script>
    var Sticky = new hcSticky('#element', {
        stickTo: '#content'
    });
         
</script>

jQuery版本

<script>
    jQuery(document).ready(function ($) {

        $('#element').hcSticky({
            stickTo: $('#content')
        });

    }); 
</script>

配置参数

  • top 0 int 目标元素固定在距离窗口顶部多少距离。

  • bottom 0 int 目标元素固定在距离窗口底部多少距离。

  • innerTop 0 int 固定元素内部距离元素顶部的距离。

  • innerSticker null string / element object 在固定元素内部的元素，优先级比nnerTop高。

  • bottomEnd 0 int 参考元素底部停止的距离。

  • stickTo null（父元素） string / element object 固定元素附着的容器。

  • followScroll true boolean 如果设置为false，在固定元素的高度大于窗口时将不会随着窗口滚动。

  • stickyClass 'sticky' string 添加到滚动元素上的class类。

  • queries null object 包含响应式断点的对象。

  • onStart null function 当元素被固定时的回调函数。

  • onStop null function 当元素停止跟随滚动时的回调函数。

  • onBeforeResize null function 当固定元素尺寸被改变前触发。

  • onResize null function 当固定元素尺寸被改变时触发。

  • resizeDebounce 100 int Limit the rate at which the HC Sticky can fire on window resize.

方法

  • options string 返回当前的配置。

  • update object 更新配置参数。

  • reinit N/A 重新计算固定元素的尺寸和位置。

  • detach N/A 将HC-Sticky从元素上分离。

  • attach N/A 将HC-Sticky附着到元素上。

  • destroy N/A 销毁插件。