hc-sticky.js网页滚动侧边栏固定效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍使用hc-sticky.js实现鼠标下滑侧边栏固定效果，hc-sticky是一款可以轻松实现网页滚动元素固定的jQuery插件，hc-sticky 可以当页面滚动的时候让页面上的某一元素固定在窗口上的某一位置。可以跨浏览器使用，有js版本和jquery版本。

如何使用：

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

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

插件初始化：

<script>
    var Sticky = new hcSticky(".hc-sticky", {
        stickTo: ".jqfree", //固定元素附着的容器
        queries: { //包含响应式断点的对象
            980: {
                //小于等于980像素失去固定效果
                disable: true
            }
        }
    });
</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.