使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航
ZKEACMS的導(dǎo)航默認(rèn)是不能固定的，隨著頁(yè)面的滾動(dòng)而滾動(dòng)，為了有更好的用戶體驗(yàn)，當(dāng)頁(yè)面往下滾動(dòng)時(shí)，可以將導(dǎo)航固定在頂端，這樣方便用戶點(diǎn)擊。
jQuery Pin
借助jQuery的一個(gè)插件 jQuery.Pin，這個(gè)插件可在用來(lái)固定頁(yè)面中的元素。
http://webpop.github.io/jquery.pin/
添加腳本
向頁(yè)面中添加腳本，使用 jquery.pin 來(lái)固定導(dǎo)航。為了減少添加腳本的次數(shù)，可以將腳本添加到布局中，這樣所有使用該局的頁(yè)面都會(huì)應(yīng)用到。
1. 布局組件 -> 默認(rèn)布局 -> 底部 將腳本添加到頁(yè)面的底部。
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>
這樣就完成了，可以到對(duì)應(yīng)的頁(yè)面去預(yù)覽一下效果了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
- 基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏
- jquery實(shí)現(xiàn)的一個(gè)導(dǎo)航滾動(dòng)效果具體代碼
- jquery編寫(xiě)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)相冊(cè)實(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)聽(tīng)實(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-11
jquery 淡入淡出效果的簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要是對(duì)jquery淡入淡出效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
很多朋友對(duì)jquery select的操作很有興趣，但網(wǎng)上的東西太多，所以腳本之家特別將Jquery Select操作方法整理下，方便大家查找。2010-05-05
本文主要介紹jQuery中on方法使用注意事項(xiàng)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了jquery圖片滾動(dòng)放大效果，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jQuery中的bind綁定事件與文本框改變事件的臨時(shí)解決方法
暫時(shí)沒(méi)有想到什么好的解決辦法，我現(xiàn)在加了個(gè)瀏覽器判斷非ie的話就注冊(cè)blur事件，這樣有個(gè)問(wèn)題就是blur實(shí)在別的控件活動(dòng)焦點(diǎn)的時(shí)候，txtStation控件注冊(cè)的方法是為了填充它緊挨著的一個(gè)下拉列表2010-08-08
jquery struts 驗(yàn)證唯一標(biāo)識(shí)(公用方法)
本教程將為大家詳細(xì)介紹下使用公用方法驗(yàn)證jquery struts唯一標(biāo)識(shí)，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-03
jQuery對(duì)象和Javascript對(duì)象之間轉(zhuǎn)換的實(shí)例代碼
jQuery對(duì)象和Javascript對(duì)象之間轉(zhuǎn)換的實(shí)例代碼，需要的朋友可以參考一下2013-03-03
本篇文章主要是對(duì)Json序列化和反序列化方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12