使用jQuery.Pin垂直滾動時固定導航
更新時間：2017年05月24日 13:05:38 作者：ZKEASOFT
這篇文章主要為大家詳細介紹了使用jQuery.Pin垂直滾動時固定導航的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
ZKEACMS的導航默認是不能固定的，隨著頁面的滾動而滾動，為了有更好的用戶體驗，當頁面往下滾動時，可以將導航固定在頂端，這樣方便用戶點擊。
jQuery Pin
借助jQuery的一個插件 jQuery.Pin，這個插件可在用來固定頁面中的元素。
http://webpop.github.io/jquery.pin/
添加腳本
向頁面中添加腳本，使用 jquery.pin 來固定導航。為了減少添加腳本的次數(shù)，可以將腳本添加到布局中，這樣所有使用該局的頁面都會應用到。
1. 布局組件 -> 默認布局 -> 底部 將腳本添加到頁面的底部。
2. 選擇腳本組件，點擊下一步
3. 輸入以下腳本內(nèi)容，保存
<script type="text/javascript" src="http://cdn.zkea.net/Scripts/jquery.pin.min.js"></script>
<script type="text/javascript">
$(function () {
$(".navigation").closest(".widget").parent().css("z-index",10000).pin();
})
</script>
這樣就完成了，可以到對應的頁面去預覽一下效果了。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery 頂部導航跟隨滾動條滾動固定浮動在頂部
- jquery scrollTop方法根據(jù)滾動像素顯示隱藏頂部導航條
- 基于jquery實現(xiàn)頁面滾動時頂部導航顯示隱藏
- jquery實現(xiàn)的一個導航滾動效果具體代碼
- jquery編寫Tab選項卡滾動導航切換特效
- jQuery實現(xiàn)帶滾動線條導航效果的方法
- 基于jquery固定于頂部的導航響應瀏覽器滾動條事件
- jQuery實現(xiàn)帶滾動導航效果的全屏滾動相冊實例
- jQuery實現(xiàn)背景彈性滾動的導航效果
- jQuery實現(xiàn)導航滾動到指定內(nèi)容效果完整實例【附demo源碼下載】
- jQuery滾動監(jiān)聽實現(xiàn)商城樓梯式導航效果
- jQuery實現(xiàn)的粘性滾動導航欄效果實例【附源碼下載】
相關(guān)文章
基于jquery的loading 加載提示效果實現(xiàn)代碼
有時候為了更好的用戶體驗，使用jquery的朋友可以參考下代碼。2011-09-09
基于jquery的loading效果實現(xiàn)代碼，需要的朋友可以參考下。2010-11-11
本篇文章主要是對jquery淡入淡出效果的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
很多朋友對jquery select的操作很有興趣，但網(wǎng)上的東西太多，所以腳本之家特別將Jquery Select操作方法整理下，方便大家查找。2010-05-05
本文主要介紹jQuery中on方法使用注意事項。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jquery圖片滾動放大效果，功能實現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jQuery中的bind綁定事件與文本框改變事件的臨時解決方法
暫時沒有想到什么好的解決辦法，我現(xiàn)在加了個瀏覽器判斷非ie的話就注冊blur事件，這樣有個問題就是blur實在別的控件活動焦點的時候，txtStation控件注冊的方法是為了填充它緊挨著的一個下拉列表2010-08-08
本教程將為大家詳細介紹下使用公用方法驗證jquery struts唯一標識，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-03
jQuery對象和Javascript對象之間轉(zhuǎn)換的實例代碼
jQuery對象和Javascript對象之間轉(zhuǎn)換的實例代碼，需要的朋友可以參考一下2013-03-03
本篇文章主要是對Json序列化和反序列化方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12