這幾天沒有之前學習的時間久，相對的知識輸入沒有之前多了，那對應的知識的輸出量就變少了，但是還是在往前看的，就是速度更慢了。但是，還是在保持着知識的輸入的，哈哈哈哈哈哈。今天就寫個電梯導航吧。簡單來說就是在當前頁面中頁面自己的跳轉，emmmmm，還是先來用文字再解釋下吧。
在頁面中，一般都會有一個側邊導航欄，點擊選項頁面會跳轉到對應的區域；或者滑動鼠標頁面到到一個分類的區域側邊導航欄的選項也會變。
看個淘寶的圖就明白了。右邊的選項對應左邊的區域，點擊頂部按鈕時頁面會跳轉到頂部。嗯哼，這就是電梯導航了。
電梯導航案例分析
這個案例就是模仿淘寶的唄，爲了區別一下，再加一個電梯導航淡入的效果，頁面到達一定位置時電梯導航欄纔會顯示。
這裏做出來的效果：頁面到達指定區域導航欄顯示、點擊導航欄選項頁面跳轉、滑動鼠標頁面跳轉、點擊頂部按鈕頁面跳轉到頂部。
- 頁面到達指定區域導航欄顯示：使用頁面滾動事件，到達位置讓導航欄顯示（淡入的效果，會柔和一點）。這裏的指定區域是自己指定的，核心就是判斷頁面捲去的頭部和指定區域距離頂部的距離的大小；
- 點擊導航欄選項頁面跳轉：註冊點擊事件，需要得到被點擊的選項的索引號，通過索引獲得對應模塊，判斷頁面捲去的頭部和模塊區域距離頂部的距離。核心是使用動畫；元素纔有動畫效果
- 滑動鼠標頁面跳轉：頁面捲去的頭部與模塊區域距離頂部距離的判斷，相等時右邊導航欄選項被選中。核心依然是判斷距離；
- 點擊頂部按鈕頁面跳轉到頂部：點擊事件，讓頁面捲去的頭部 = 0。
以上實現的效果均是使用的jQuery提供的方法。核心點 —— 頁面捲去的頭部、元素距離頂部的距離、動畫
電梯導航還有一個核心點就是導航欄的選項和頁面中顯示對應的內容區域是一一對應的，找到導航選項就能找到對應的內容區；找到內容去就能找到對應的導航選項，通過索引對應。
看代碼咯
$(function () {
// 1. 顯示隱藏電梯導航
// 頁面捲去的頭部 = 今日推薦距離頂部的距離
// console.log($(document).scrollTop());
var asideNavTop = $(".recommend").offset().top;
toggleTool();
// 切換側邊導航的狀態
function toggleTool() {
if ($(document).scrollTop() >= asideNavTop) {
console.log(asideNavTop);
$(".fixedtool").fadeIn();
} else {
$(".fixedtool").fadeOut();
};
}
// 頁面滾動事件
$(document).scroll(function () {
// 指定位置顯示導航
toggleTool();
// 3. 頁面滑到相對應的內容區域 導航欄選項li添加或刪除類
// 通過內容區域索引號 找到導航欄選項的索引
$(".floor .w").each(function (i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
}
})
});
// 2. 點擊li頁面跳轉到對應的區域
$(".fixedtool li").on("click", function () {
// 獲取當前被點擊的li的索引號
var index = $(this).index();
var currentLocation = $(".floor .w").eq(index).offset().top;
// 頁面跳轉的比較生硬，可以採取動畫來做跳轉
// $("html,body").scrollTop(currentLocation);
// (1)要記住：只有元素纔有動畫
$("html,body").stop().animate({
scrollTop: currentLocation
})
// (2)同時選中的選項添加類
$(this).addClass("current").siblings().removeClass("current");
})
// 4. 點擊回到頂部
$(".fixedtool .back").on("click", function () {
$("html,body").stop().animate({
scrollTop: 0
})
})
})
上面的效果基本上是實現了，但是程序有bug,當我們點擊導航選項li時,會有閃爍的背景色變化。原因是隻要我們點擊li,就會給當前li添加背景色的類其餘移除類。解決方法就是在點擊li是不需要進行背景色類的切換 —— 設置節流閥
$(function () {
// 點擊li時不需要切換背景色
var flag = true;
// 1. 顯示隱藏電梯導航
// 頁面捲去的頭部 = 今日推薦距離頂部的距離
// console.log($(document).scrollTop());
var asideNavTop = $(".recommend").offset().top;
toggleTool();
// 切換側邊導航的狀態
function toggleTool() {
if ($(document).scrollTop() >= asideNavTop) {
console.log(asideNavTop);
$(".fixedtool").fadeIn();
} else {
$(".fixedtool").fadeOut();
};
}
// 頁面滾動事件 $(window).scroll()
$(window).scroll(function () {
// 指定位置顯示導航
toggleTool();
// 3. 頁面滑到相對應的內容區域 導航欄選項li添加或刪除類
// 通過內容區域索引號 找到導航欄選項的索引
// 遍歷對象 通過內容區域找到對應的導航選項
if (flag) {
$(".floor .w").each(function (i, ele) {
// 頁面捲去的頭部 >= 當前內容區域的top值
if ($(document).scrollTop() >= $(ele).offset().top) {
// 當前內容區域對應的導航選項li 添加類 其餘的兄弟移除類
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass(); // 鏈式編程
}
})
}
});
// 2. 點擊li頁面跳轉到對應的區域
$(".fixedtool li").on("click", function () {
// 點擊li時 不需要進行類的切換 關閉節流閥
flag = false;
// 獲取當前被點擊的li的索引號
var index = $(this).index();
var currentLocation = $(".floor .w").eq(index).offset().top;
// 頁面跳轉的比較生硬，可以採取動畫來做跳轉
// $("html,body").scrollTop(currentLocation);
// (1)要記住：只有元素纔有動畫
$("html,body").stop().animate({
scrollTop: currentLocation
}, function () {
flag = true; // 當頁面動畫效果完成後打開節流閥
})
// (2)同時選中的選項添加類
$(this).addClass("current").siblings().removeClass("current");
})
// 4. 點擊回到頂部
$(".fixedtool .back").on("click", function () {
$("html,body").stop().animate({
scrollTop: 0
})
})
// 此時程序有bug,當我們點擊導航選項li時,會有閃爍的背景色變化
// 原因是隻要我們點擊li,就會給當前li添加背景色的類其餘移除類
// 解決方法就是在點擊li是不需要進行背景色類的切換
// 設置節流閥
})
emmmmmm，代碼並不是我自己寫的，是看視頻看老師寫的，我自己又做了一遍，然後還添加返回頂部的效果。功能需求的思路是需要多學習學習的。
加油！！！！！