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