jQuery網頁定位導航特效實現(xiàn)方法
更新時間：2016年12月19日 11:17:13 作者：鬼畜十三
這篇文章主要介紹了jQuery網頁定位導航特效實現(xiàn)方法,結合實例形式分析了jQuery網頁定位導航的功能描述、原理與核心實現(xiàn)代碼,需要的朋友可以參考下
本文實例講述了jQuery網頁定位導航特效實現(xiàn)方法。分享給大家供大家參考，具體如下：
描述：左右聯(lián)動的導航，非常適合展示頁面內容多，區(qū)塊劃分又很明顯的，點擊右邊固定導航項時，左邊的內容跟著切換。滑動滾動條的時候，右邊的導航也隨著左邊的展示而進行高亮切換。
思路：比較滾動距離和樓層距離（相對于頂部），如果滾動距離大于等于樓層距離，即進入了相應樓層，然后通過一個變量來記錄該樓層的信息，最后傳遞給右邊高亮顯示
1.點擊右邊固定導航項時，左邊的內容跟著切換。
只需將右邊a的href設置為左邊區(qū)塊的id加上#即可
2.滑動滾動條的時候，右邊的導航也隨著左邊的展示而進行高亮切換。
核心代碼如下：
$(function(){
$(window).on("scroll",function(e){
var $floor=$("li[id^=floor]");
var $nav=$(".mui-lift-nav");
var floorId="";
var scrollTop=$(this).scrollTop();
$floor.each(function(index,Ele){ //index是每個樓層的索引，Ele是每個樓層節(jié)點的dom元素對象（這個對象是原生對象，不是jquery對象）
var offsetTop=$(Ele).offset().top; //Ele給它一層封裝，必須加個美元符號，才能把它轉換為jquery對象
if(scrollTop>=offsetTop){
floorId="#"+$(this).attr("id");
}else{
return false;
}
});
$nav.filter("[href="+floorId+"]").addClass("mui-lift-cur-nav").siblings().removeClass("mui-lift-cur-nav"); //filter方法可以在一個集合里篩選出所要的元素
if(scrollTop<$floor.first().offset().top ||scrollTop>$floor.last().offset().top+$floor.last().height()){
$nav.removeClass("mui-lift-cur-nav");
}
});
})
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
這篇文章主要介紹了jQuery檢測滾動條是否到達底部的實現(xiàn)方法，文中介紹了兩種檢測滾動條到達底部的狀況，感興趣的小伙伴們可以參考一下2015-12-12
大家都知道dom是一種與瀏覽器、平臺、語言無關的接口，使用dom接口可以很輕松訪問頁面中所有的標準組件，本篇文章主要給大家講解jquery基礎教程之dom操作，有需要的朋友可以參考下2015-08-08
這篇文章主要介紹了淺析jQuery Ajax請求參數和返回數據的處理的相關資料,需要的朋友可以參考下2016-02-02
在jQuery1.5中使用deferred對象 著放大鏡看Promise
在那篇經典的關于jQuery1.5中Deferred使用方法介紹的文章中（譯文見這里），有下面一段描述2011-03-03
這篇文章主要介紹了基于jQuery創(chuàng)建鼠標懸停效果的方法,實例分析了jQuery實現(xiàn)鼠標特效的原理與詳細步驟,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄猨Query實現(xiàn)拼圖小游戲(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
輕松使用jQuery雙向select控件Bootstrap Dual Listbox
這篇文章主要教大家如何輕松使用jQuery雙向select控件Bootstrap Dual Listbox，感興趣的小伙伴們可以參考一下2015-12-12
jQuery實現(xiàn)滾動到底部時自動加載更多的方法示例
這篇文章主要介紹了jQuery實現(xiàn)滾動到底部時自動加載更多的方法,涉及jQuery基于ajax動態(tài)操作頁面元素相關實現(xiàn)技巧,需要的朋友可以參考下2018-02-02
Jquery創(chuàng)建層顯示標題和內容且隨鼠標移動而移動
本文為大家介紹下使用Jquery創(chuàng)建一個層顯示標題的內容且隨鼠標移動，具體的實現(xiàn)如下2014-01-01
這篇文章主要介紹了jQuery實現(xiàn)防止提交按鈕被雙擊的方法,涉及jQuery針對鼠標按鍵的操作技巧以及preventDefault方法對元素默認行為的修改技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03