功能描述： 當滾動條滑到某個位置時，顯示電梯導航； 當用戶滾動滾動條時，讓電梯導航的選中狀態和當前滾動到的區域保持一致； 當用戶點擊電梯導航時，滾動條滾動到被點擊導航對應的區域 準備工作： 首先將jQuery文件以及你自己的js文件引入你的html里，jq文件要放在上面 <script src="j ...
功能描述：
當滾動條滑到某個位置時，顯示電梯導航；
當用戶滾動滾動條時，讓電梯導航的選中狀態和當前滾動到的區域保持一致；
當用戶點擊電梯導航時，滾動條滾動到被點擊導航對應的區域
準備工作：
首先將jQuery文件以及你自己的js文件引入你的html里，jq文件要放在上面
<script src="js/jquery.min.js"></script> <script src="js/index.js"></script>
HTML代碼：
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樣式代碼
具體功能實現：
1. 當用戶滑動到banner區域時，顯示電梯導航。封裝成一個函數toggleTool()
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 })
