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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM