jQuery插件StickUp實現(xiàn)網(wǎng)頁導航置頂
更新時間:2015年04月12日 09:38:17 投稿:hebedich
本文給大家介紹的是一款jQuery插件--StickUp,他的主要用途是實現(xiàn)網(wǎng)頁元素固定,如導航固定讓其總是保持在視圖中可見,效果非常不錯,這里推薦給小伙伴們。
實用的jQuery網(wǎng)頁元素固定導航置頂插件StickUp,簡單的jQuery插件,實現(xiàn)網(wǎng)頁元素固定,如導航固定讓其總是保持在視圖中可見,在one-page頁面中就可以看出效果,大家可以研究研究。
使用方法:
1.加載插件和jQuery
<script src="js/jquery.js">script> <script src="js/stickUp.min.js">script> <link href="stickup.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js">script>
2.HTML內容(Bootstrap布局)
<div class="navbar-wrapper"> <div class="container"> <div class="navwrapper"> <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><stickUpa> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="menuItem active"><a href="#home">Homea</li> <li class="menuItem"><a href="#features">Featuresa</li> <li class="menuItem"><a href="#updates">Updatesa</li> <li class="menuItem"><a href="#installation">Installationa</li> <li class="menuItem"><a href="#one-pager">One Pagera</li> <li class="menuItem"><a href="#extras">Extrasa</li> <li class="menuItem"><a href="#wordpress">Wordpressa</li> <li class="menuItem"><a href="#contact">Contacta</li> </ul> </div> </div> </div> </div>
3.函數(shù)調用
<script type="text/javascript"> //initiating jQuery jQuery(function($) { $(document).ready( function() { //enabling stickUp on the '.navbar-wrapper' class $('.navbar-wrapper').stickUp({ parts: { 0:'home', 1:'features', 2: 'news', 3: 'installation', 4: 'one-pager', 5: 'extras', 6: 'wordpress', 7: 'contact' }, itemClass: 'menuItem', itemHover: 'active' }); }); }); <script>
以上所述就是本文的全部內容了,希望對大家熟練使用jQuery能夠有所幫助。
您可能感興趣的文章:
- jquery實現(xiàn)網(wǎng)頁定位導航
- JQUERY實現(xiàn)網(wǎng)頁右下角固定位置展開關閉特效的方法
- 讓網(wǎng)頁跳轉到指定位置的jquery代碼非書簽
- jQuery仿京東商城樓梯式導航定位菜單
- jQuery實現(xiàn)網(wǎng)頁頂部固定導航效果代碼
- Jquery網(wǎng)頁內滑動緩沖導航的實現(xiàn)代碼
- jQuery縱向導航菜單效果實現(xiàn)方法
- jQuery+CSS3實現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導航菜單
- jquery實現(xiàn)垂直和水平菜單導航欄
- jQuery+css實現(xiàn)非常漂亮的水平導航菜單效果
- jQuery+CSS實現(xiàn)一個側滑導航菜單代碼
- jquery實現(xiàn)具有收縮功能的垂直導航菜單
- jQuery網(wǎng)頁定位導航特效實現(xiàn)方法
相關文章
把html頁面的部分內容保存成新的html文件的jquery代碼
把html頁面的部分內容保存成新的html文件,用到了jquery的獲取指定id的內容。然后保存代碼。2009-11-11jQuery中使用了document和window哪些屬性和方法小結
未列出常見的比如document.getElementById(),object.addEventListener()等。2011-09-09jQuery-ui插件sortable實現(xiàn)自由拖動排序
這篇文章主要為大家詳細介紹了jQuery-ui插件sortable實現(xiàn)自由拖動排序,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12