功能描述：
當滾動潭訓到某個位置時，顯示電梯導航；
當用戶滾動滾動條時，讓電梯導航的選中狀態和當前滾動到的區域保持一致；
當用戶點擊電梯導航時，滾動條滾動到被點擊導航對應的區域
準備作業：
首先將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 })
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/24980.html
標籤：jQuery
上一篇：教育技術創新途徑
下一篇：組裝個服務器玩SQL