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>