jquery页面滚动固定元素插件HC-Sticky

所属分类:UI-滚动

 32463  365  查看评论 (3)
分享到微信朋友圈
X
jquery页面滚动固定元素插件HC-Sticky ie兼容9

HC-Sticky

hc-sticky是一款jquery页面滚动固定元素插件。该插件可以跨浏览器使用,具有在页面滚动时将指定元素固定在窗口上的功能。该页面滚动固定元素插件有js版本和jquery版本。

安装

可以通过npm或bower来安装hc-sticky插件。

npm: npm install --save hc-sticky
bower: bower install --save hc-sticky

使用方法

在页面中引入jQuery和hc-sticky.js文件。

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

初始化插件

该页面滚动固定元素插件分js版本和jQuery版本,初始化方法分别如下:

js版本:

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

jQuery版本:

jQuery(document).ready(function($) {
  $('#element').hcSticky({
    stickTo: '#content'
  });
});

 配置参数

该jquery页面滚动固定元素插件的可用配置参数有:

参数默认值类型描述
top0int目标元素固定在距离窗口顶部多少距离。
bottom0int目标元素固定在距离窗口底部多少距离。
innerTop0int固定元素内部距离元素顶部的距离。
innerStickernullstring / element object在固定元素内部的元素,优先级比nnerTop高。
bottomEnd0int参考元素底部停止的距离。
stickTonull(父元素)string / element object固定元素附着的容器。
followScrolltrueboolean如果设置为false,在固定元素的高度大于窗口时将不会随着窗口滚动。
stickyClass'sticky'string添加到滚动元素上的class类。
queriesnullobject包含响应式断点的对象。
onStartnullfunction当元素被固定时的回调函数。
onStopnullfunction当元素停止跟随滚动时的回调函数。
onBeforeResizenullfunction当固定元素尺寸被改变前触发。
onResizenullfunction当固定元素尺寸被改变时触发。
resizeDebounce100intLimit the rate at which the HC Sticky can fire on window resize.

方法

该jquery页面滚动固定元素插件的可用方法有:

方法接收值描述
optionsstring返回当前的配置。
updateobject更新配置参数。
reinitN/A重新计算固定元素的尺寸和位置。
detachN/A将HC-Sticky从元素上分离。
attachN/A将HC-Sticky附着到元素上。
destroyN/A销毁插件。
相关插件-滚动

jquery逐条文字向上滚动

jquery逐条文字向上滚动效果
  滚动
 50818  426

jQuery鼠标滚屏锚点定位

利用mousewheel库实现滚屏事件,同时支持侧边栏控制
  滚动
 32245  392

向下滚动加载动画特效插件AOS

向下滚动网页加载动画特效插件AOS
  滚动
 37172  435

jQuery滚动楼层效果

jQuery滚动楼层效果,通俗简单好上手,js中有详细步骤解析。
  滚动
 38789  417

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    心心愿 0
    2019/4/9 11:30:16
    作者,在这插件上加上事件监听就更完美了 回复
    那一瞬.................. 0
    2017/12/27 9:31:06
    后知后觉 0
    2017/12/26 17:41:50
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复