jQuery實現電梯導航特效

時間 2019-12-09

標籤 jquery 實現電梯導航特效欄目 JQuery 简体版

原文原文鏈接

功能描述：html

當滾動條滑到某個位置時，顯示電梯導航； jquery

當用戶滾動滾動條時，讓電梯導航的選中狀態和當前滾動到的區域保持一致；ide

當用戶點擊電梯導航時，滾動條滾動到被點擊導航對應的區域函數

準備工做：動畫

首先將jQuery文件以及你本身的js文件引入你的html裏，jq文件要放在上面this

<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>

HTML代碼：spa

 1 <body>
 2     <div class="slider-bar">
 3         <ul>
 4             <li>頭部區域</li>
 5             <li class="current">導航區域</li>
 6             <li>第一部分</li>
 7             <li>第二部分</li>
 8             <li>第三部分</li>
 9             <li>底部區域</li>
10         </ul>
11     </div>
12     <div class="header w">頭部區域</div>
13     <div class="banner w">banner區域</div>
14     <div class="main w">主體部分1</div>
15     <div class="main w">主體部分2</div>
16     <div class="main w">主體部分2</div>
17     <div class="footer w">footer部分</div>
18 </body>

 1 <style>
 2     * {
 3         margin: 0;
 4         padding: 0;
 5     }
 6     li {
 7         list-style: none;
 8     }
 9     .slider-bar {
10         display: none;
11         position: fixed;
12         left: 47%;
13         top: 160px;
14         margin-left: 600px;
15         width: 45px;
16         height: 305px;
17         background-color: pink;
18         cursor: pointer;
19         overflow: hidden;
20     }
21     .slider-bar li {
22         font-size: 15px;
23         padding: 5px;
24         border-bottom: 1px solid #fff;
25     }
26     .slider-bar li:hover {
27         background-color: red;
28         color: #fff;
29     }
30     .current {
31         background-color: red;
32         color: #fff;
33     }
34     .w {
35         width: 1100px;
36         margin: 10px auto;
37     }
38     .header {
39         height: 150px;
40         background-color: purple;
41     }
42     .banner {
43         height: 300px;
44         background-color: skyblue;
45     }
46     .main {
47         height: 500px;
48         background-color: yellowgreen;
49     }
50     .footer {
51         height: 300px;
52         background-color: orange;
53     }
54 </style>

CSS樣式代碼

具體功能實現：code

1. 當用戶滑動到banner區域時，顯示電梯導航。封裝成一個函數toggleTool()htm

1 function toggleTool() {
2     if($(document).scrollTop() > $(".banner").offset().top - 1) {
3         $(".slider-bar").fadeIn();  // fadeIn()淡入（顯示）
4     } else {
5         $(".slider-bar").fadeOut(); // fadeOut()淡出（隱藏）
6     }
7 }

2. each()遍歷全部模塊，讓電梯導航的選中狀態和對應模塊區域保持一致。封裝成一個函數eachTool()對象

若是滾動上去的高度（$(document).scrollTop()）大於模塊距離文檔頂部的距離（$(ele).offset().top），說明滾動到了相應模塊。給對應的電梯導航添加current類（選中狀態），並移除其餘導航的current類；

可是若是footer部分過短，那footer對應的導航永遠也不會成選中狀態，因此要再寫一個判斷，判斷是否滾動到底部；

當（滾上去的高度）+（當前窗口的高度）>=（整個文檔的高度）時說明滾動到了底部，給footer添加current 並移除其餘current

 1 function eachTool() {
 2     if(flag) {  // flag互斥鎖 當它爲true時才執行裏邊的代碼  3         $(".w").each(function(i, ele) {   // i是索引，ele是遍歷對象
 4             // 減1是爲了解決一個小bug
 5             if($(document).scrollTop() > $(ele).offset().top - 1) {
 6                 // 給對應導航添加current類，並移除其餘導航的current類（li裏就這一個類，寫不寫上current都行）
 7                 $(".slider-bar li").eq(i).addClass("current").siblings().removeClass();
 8             } else if($(window).scrollTop() + $(window).height() >= $(document).height() - 1) {
 9                 // 當頁面滾到底部時，給footer對應的導航添加current類
10                 var footIndex = $(".slider-bar li").length - 1;
11                 $(".slider-bar li").eq(footIndex).addClass("current").siblings().removeClass();
12             }
13         })
14     }
15 }

給window對象綁定滾動事件，當頁面滾動時調用上面那兩個函數；

固然，爲了防止用戶刷新頁面時導航條顯示不正確，因此當頁面加載完時咱們先調用一次

1 toggleTool(); 
2 eachTool();
3 $(window).scroll(function(e) {
4     toggleTool();
5     eachTool();
6 })

3. 用戶點擊導航，讓滾動條滾到對應的區域；

用戶點擊導航時頁面會滾動，就會觸發頁面滾動事件，會執行eachTool()裏的背景選擇（選中狀態），因此點擊導航後先讓flag改成false，禁止執行eachTool()裏的內容；

獲取用戶當前點擊的li的索引index，正好對應的就是相應模塊的索引，知道了是哪一個模塊就能夠算出這個模塊距離文檔頂部的距離。調用動畫函數animate()讓滾動條滾動到這個高度；

執行完動畫後要把flag改成true，否則flag永遠是false，就沒辦法執行eachTool()裏的內容

 1 $(".slider-bar li").click(function(e) {
 2     flag = false;
 3     // 將模塊距離頂部的高度，賦值給current
 4     var current = $(".w").eq($(this).index()).offset().top;  // $(".w").eq(index) 選擇器，選擇第幾個元素
 5     $("html").stop().animate({  // 調用動畫前先stop()中止其餘未完成的動畫（解決排隊問題）
 6         scrollTop: current
 7     }, function() {   // 回調函數，動畫完成後執行
 8         flag = true;
 9     })
10     // 點擊添加current類（選中狀態） 並移除兄弟節點的current類
11     $(this).addClass("current").siblings().removeClass();
12 })

完整JavaScript代碼：

 1 $(function() {
 2     // 節流閥（互斥鎖） 用來解決一個小bug（當用戶點擊導航條時，頁面滾動會觸發eachTool()裏的內容，當咱們點擊時不須要觸發eachTool()）
 3     var flag = true;
 4     // 當用戶滑動到banner區域，顯示電梯導航。封裝成一個函數toggleTool()
 5     function toggleTool() {
 6         if($(document).scrollTop() > $(".banner").offset().top - 1) {
 7             $(".slider-bar").fadeIn();  // fadeIn()淡入（顯示）
 8         } else {
 9             $(".slider-bar").fadeOut(); // fadeOut()淡出（隱藏）
10         }
11     }
12     // each()遍歷全部模塊，讓電梯導航和對應模塊保持一致。封裝成一個函數eachTool()
13     function eachTool() {
14         if(flag) {
15             $(".w").each(function(i, ele) {   // i是索引，ele是遍歷對象
16                 // 若是滾動上去的高度大於模塊距離文檔頂部的距離，說明滾動到了相應模塊（減1是爲了解決一個小bug）
17                 if($(document).scrollTop() > $(ele).offset().top - 1) {
18                     // 給對應的電梯導航添加current類，並移除兄弟的current類（li裏就這一個類，寫不寫上current都行）
19                     $(".slider-bar li").eq(i).addClass("current").siblings().removeClass();
20                 // 若是footer部分過短，那footer對應的導航永遠也不會亮了，因此要再寫一個判斷↓判斷是否滾動到底部
21                 } else if($(window).scrollTop() + $(window).height() >= $(document).height() - 1) {
22                     // 當頁面滾到底部時，給footer對應的導航添加current類
23                     var footIndex = $(".slider-bar li").length - 1;
24                     $(".slider-bar li").eq(footIndex).addClass("current").siblings().removeClass();
25                 }
26             })
27         }
28     }
29     // 先調用兩個函數，以防用戶刷新頁面後不顯示
30     toggleTool(); 
31     eachTool();
32     $(window).scroll(function(e) {
33         toggleTool();
34         eachTool();
35     })
36 
37     // 用戶點擊導航，讓滾動條滾到相應模塊
38     $(".slider-bar li").click(function(e) {
39         // 點擊li頁面也會滾動，就會觸發頁面滾動事件，會執行eachTool()裏的背景選擇
40         // 因此點擊li後讓flag爲false，禁止執行eachTool()裏的內容
41         flag = false;
42         // $(this).index()獲取用戶當前點擊的li的索引，正好對應的就是相應模塊索引
43         // 獲得相應模塊索引就能夠算出這個模塊距離頂部的高度，賦值給current
44         var current = $(".w").eq($(this).index()).offset().top;  // $(".w").eq(index) 選擇器，選擇第幾個元素
45         $("html").stop().animate({  // 調用動畫前先stop()中止其餘未完成的動畫（解決排隊問題）
46             scrollTop: current
47         }, function() {   // 回調函數，動畫執行完後執行
48             flag = true;   // 讓flag變爲true，否則flag永遠是false，沒辦法執行eachTool()裏的內容
49         })
50         // 點擊添加current類 並移除兄弟節點的current類
51         $(this).addClass("current").siblings().removeClass();
52     })
53 })

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。