jquery.sticky 粘性滚动插件使用

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

插件依赖于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>

巴特西

jquery.sticky 粘性滚动插件使用

Options

Events

最新文章

热门文章