使用jQuery.Pin垂直滾動時固定導(dǎo)航
ZKEACMS的導(dǎo)航默認是不能固定的,隨著頁面的滾動而滾動,為了有更好的用戶體驗,當(dāng)頁面往下滾動時,可以將導(dǎo)航固定在頂端,這樣方便用戶點擊。
jQuery Pin
借助jQuery的一個插件 jQuery.Pin,這個插件可在用來固定頁面中的元素。
http://webpop.github.io/jquery.pin/
添加腳本
向頁面中添加腳本,使用 jquery.pin 來固定導(dǎo)航。為了減少添加腳本的次數(shù),可以將腳本添加到布局中,這樣所有使用該局的頁面都會應(yīng)用到。
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>
這樣就完成了,可以到對應(yīng)的頁面去預(yù)覽一下效果了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery 頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部
- jquery scrollTop方法根據(jù)滾動像素顯示隱藏頂部導(dǎo)航條
- 基于jquery實現(xiàn)頁面滾動時頂部導(dǎo)航顯示隱藏
- jquery實現(xiàn)的一個導(dǎo)航滾動效果具體代碼
- jquery編寫Tab選項卡滾動導(dǎo)航切換特效
- jQuery實現(xiàn)帶滾動線條導(dǎo)航效果的方法
- 基于jquery固定于頂部的導(dǎo)航響應(yīng)瀏覽器滾動條事件
- jQuery實現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊實例
- jQuery實現(xiàn)背景彈性滾動的導(dǎo)航效果
- jQuery實現(xiàn)導(dǎo)航滾動到指定內(nèi)容效果完整實例【附demo源碼下載】
- jQuery滾動監(jiān)聽實現(xiàn)商城樓梯式導(dǎo)航效果
- jQuery實現(xiàn)的粘性滾動導(dǎo)航欄效果實例【附源碼下載】
相關(guān)文章
基于jquery的loading 加載提示效果實現(xiàn)代碼
有時候為了更好的用戶體驗,使用jquery的朋友可以參考下代碼。2011-09-09jQuery中的bind綁定事件與文本框改變事件的臨時解決方法
暫時沒有想到什么好的解決辦法,我現(xiàn)在加了個瀏覽器判斷非ie的話就注冊blur事件,這樣有個問題就是blur實在別的控件活動焦點的時候,txtStation控件注冊的方法是為了填充它緊挨著的一個下拉列表2010-08-08jQuery對象和Javascript對象之間轉(zhuǎn)換的實例代碼
jQuery對象和Javascript對象之間轉(zhuǎn)換的實例代碼,需要的朋友可以參考一下2013-03-03