一個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>