jquery（sticky）滚动到页面顶部固定元素插件

演示  website 下载

sticky是一款轻量级可配置的jQuery的插件,当元素的位置向下滚动时到达页面的顶部，可以锁定元素。插件提供了一种简便的方法，支持任何UI组件(如网站导航、侧边栏小部件)不管你怎么滚动页面都固定窗口的顶部。

1.加载jQuery库和插件文件。

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

2. 添加如下代码即可固定在上面滚动。 

<nav class="navbar">
  ...
</nav>
jQuery('.navbar').sticky();

3. 设置偏移量

<aside class="card">
  ...
</aside>
jQuery('.card').sticky({
  offsetY: 90
});

4. 设置元素的宽度。 默认值:false。

jQuery('.card').sticky({
  outerWidth: true
});

5. 设置元素的z-index 默认值:99。

jQuery('.card').sticky({
  zIndex: 9999
});

6. 添加元素的时候固定在顶部是的样式。 默认值:element-sticky。

jQuery('.card').sticky({
  cssClass: 'myClass'
});

7. 禁用sticky行为 

jQuery('.card').sticky('destroy');

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。