jquery.sticky 粘性滚动插件使用

一个jQuery插件，使你能够做任何元素在您的网页上总是可见的,可以作为顶部固定导航显示插件。

官网地址：http://stickyjs.com/

github：https://github.com/garand/sticky

 

插件依赖于jq核心库，需要引入！

该博客导航固定使用了此插件

<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

解绑sticky

<script>
  $("#sticker").unstick();
</script>

Options#

• topSpacing: (default: 0) 页面顶部和元素顶部之间的像素。
• bottomSpacing: (default: 0) 页面底部和元素底部之间的像素。
• className: (default: 'is-sticky') “粘贴”时添加到元素包装器的CSS类。
• wrapperClassName: (default: 'sticky-wrapper') CSS类添加到包装器。
• center: (default: false) 用于确定粘性元素是否应在页面中水平居中。
• getWidthFrom: (default: '') 所引用元素的选择器，用于设置“粘性”元素的固定宽度。
• widthFromWrapper: (default: true) 布尔值，确定是否应更新“粘性”元素的宽度以匹配包装器的宽度。包装器是固定的（不包含静态元素）固定元素的占位符，其宽度取决于上下文和CSS规则。仅在getWidthForm未设置的情况下有效。
• responsiveWidth: (default: false) 布尔值，确定是否将在调整窗口大小时（使用getWidthfrom）重新计算宽度
• zIndex: (default: inherit) 控制所粘贴元素的z-index

Events#

• sticky-start: 元素变粘时。
• sticky-end: 元素返回其原始位置时
• sticky-update: 粘贴元素时，但由于约束原因必须更新位置
• sticky-bottom-reached: 元素达到底部空间限制时
• sticky-bottom-unreached: 当元素未达到底部空间限制时

<script>
  $('#sticker').on('sticky-start', function() { console.log("Started"); });
  $('#sticker').on('sticky-end', function() { console.log("Ended"); });
  $('#sticker').on('sticky-update', function() { console.log("Update"); });
  $('#sticker').on('sticky-bottom-reached', function() { console.log("Bottom reached"); });
  $('#sticker').on('sticky-bottom-unreached', function() { console.log("Bottom unreached"); });
</script>