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

橙子2024-01-20 19:06　1218 浏览

打赏收藏

‌hc-sticky是一款jquery页面滚动固定元素插件,旨在使侧边栏在用户滚动页面时保持固定和永久可见。该插件可以跨浏览器使用，具有在页面滚动时将指定元素固定在窗口上的功能。该页面滚动固定元素插件有js版本和jquery版本...

‌hc-sticky是一款jquery页面滚动固定元素插件,旨在使侧边栏在用户滚动页面时保持固定和永久可见。该插件可以跨浏览器使用，具有在页面滚动时将指定元素固定在窗口上的功能。该页面滚动固定元素插件有js版本和jquery版本。

使用方法

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

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

<main>
    <div class="content">
        <!-- 内容区域 -->
    </div>
    <aside  class="sidebar">
        <!-- 侧边栏内容 -->
    </aside>
</main>

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

js版本：

var Sticky = new hcSticky('aside', {
  stickTo: 'main'
});

‌jQuery版本：

jQuery(document).ready(function($) {
  $('aside').hcSticky({
    stickTo: 'main'
  });
});

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

参数	默认值	类型	描述
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.

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