jQuery實現電梯導航特效

来源:https://www.cnblogs.com/sunyan-blog/archive/2019/12/02/11966577.html

功能描述: 當滾動條滑到某個位置時,顯示電梯導航; 當用戶滾動滾動條時,讓電梯導航的選中狀態和當前滾動到的區域保持一致; 當用戶點擊電梯導航時,滾動條滾動到被點擊導航對應的區域 準備工作: 首先將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 })

 


您的分享是我們最大的動力!

更多相關文章
  • 在使用jquery-validate.js插件時可以做一些初始化配置在初始化jquery-validate.js對象的時候,將外部的一些配置和該插件內部的一些預設配置合併在一起,如果有相同的配置,前者覆蓋後者(預設)的配置 // Constructor for validator $.validat ...
  • JS是一門什麼樣的語言? 是一門解釋性的語言 是一門腳本語言 是一門弱類型語言,聲明變數都用var 是一門基於對象的語言 是一門動態類型的語言: 1. 代碼(變數)只有執行到這個位置的時候,才知道這個變數中到底存儲的是什麼,如果是對象,就有對象的屬性和方法,如果是變數就是變數的作用 2. 對象沒有什 ...
  • 1. 簡書類 實現效果 html代碼 <div class="container"> <form action="" class="parent"> <input type="text" class="search" placeholder="搜索"> <input type="button" na ...
  • javascript 報錯 string.split is not a function ...
  • 自定義html元素滑鼠右鍵菜單 實現思路 在觸發contextmenu事件時,取消預設行為(也就是阻止瀏覽器顯示自帶的菜單),獲取右鍵事件對象,來確定滑鼠的點擊位置,作為顯示菜單的left和top值 編碼實現 <!DOCTYPE html> <html> <head> <meta charset=" ...
  • 功能:在文本框中輸入待辦事項按下回車後,事項會出現在未完成列表中;點擊未完成事項前邊的覆選框後,該事項會出現在已完成列表中,反之亦然;點擊刪除按鈕會刪除該事項。待辦事項的數據是保存到本地存儲的(localStorage),就算關閉頁面再打開,數據還是存在的(前提是要用相同瀏覽器)。 ToDoList ...
  • 基於Taro多端實踐TaroPop:自定義模態框|dialog對話框|msg消息框|Toast提示 taro自定義彈出框支持編譯到多端H5/小程式/ReactNative,還可以自定義彈窗類型/彈窗樣式、多按鈕事件/樣式、自動關閉、遮罩層、彈窗顯示位置及自定義內容模板 用法 ▍在相應頁面引入組件 i ...
  • 創建對象三種方式: 調用系統的構造函數創建對象 自定義構造函數創建對象(結合第一種和需求通過工廠模式創建對象) 字面量的方式創建對象 第一種:調用系統的構造函數創建對象 //小蘇舉例子: //實例化對象 var obj = new Object(); //對象有特征 屬性;和 行為 方法 //添加屬 ...
一周排行
  • 前言 上一篇文章主要介紹了ObjectPool的理論知識,再來介紹一下Microsoft.Extensions.ObjectPool是如何實現的. 核心組件 ObjectPool ObjectPool 是一個泛型抽象介面,他抽象了兩個方法Get和Return Get方法用於從對象池獲取到可用對象,如 ...
  • 國內優秀的WPF開源控制項庫,Panuon.UI的優化版本。一個漂亮的、使用樣式與附加屬性的WPF UI控制項庫,值得向大家推薦使用與學習。 今天站長(Dotnet9,站長網址:https://dotnet9.com, 微信公眾號:dotnet9_com)推薦另一款開源的WPF控制項庫(PanuonUI. ...
  • WGS-84坐標系:全球定位系統使用,GPS、北斗等 GCJ-02坐標系:中國地區使用,由WGS-84偏移而來 BD-09坐標系:百度專用,由GCJ-02偏移而來 (PS:源於項目需求,本來是想讀圖片的經緯度顯示在百度離線地圖上的。後來發現定位偏差太大,仔細一想,原來是圖片和百度使用的坐標系不一樣。 ...
  • .NET Core3.1發佈 我們很高興宣佈.NET Core 3.1的發佈。實際上,這隻是對我們兩個多月前發佈的.NET Core 3.0的一小部分修複和完善。最重要的是.NET Core 3.1是長期支持(LTS)版本,並且將支持三年。和過去一樣,我們希望花一些時間來發佈下一個LTS版本。額外的 ...
  • based on https://stackoverflow.com/questions/659013/accessing-a-shared-file-unc-from-a-remote-non-trusted-domain-with-credentials ...
  • private static void PathCopyFilesWithOriginalFolder() { int sourceFilesNum = 0; try { string sourceDir = @"E:\Source"; string destDir = @"E:\Dest"; st... ...
  • 前言 上一次資料庫災備和性能優化後,資料庫專家建議,在不擴容的情況下,客戶端不能再頻繁的掃描資料庫了!一句驚醒夢中人,因為我也發現資料庫越來越卡了,自從上個項目上線後,就出現了這個情況。後來分析其原因,發現客戶端每3秒中掃描一次資料庫,一共5000+客戶端,可想而知,頻繁掃描嚴重影響到資料庫性能。所 ...
  • 2019.12.4今天開通博客,跌跌撞撞學了3年C#,感覺有了基礎但還不夠深入,有些東西學了又忘,特此開通博客做一個記錄,記錄下以後學習中的每一個知識點,再接再厲,每天進步一點點!!!!!! ...
  • 本人剛接觸.net core 由於公司項目需要部署在Linux上 近些日子學習和網上大面積搜教程 我在這給大家歸攏歸攏借鑒的教程做了套方案(我寫的可以實現 但不一定是最好的 僅供參考) 我只用過core3.0 之前的版本沒接觸過 首先需要使用Nginx反代理的項目那一定是web框架的ASP.NET ...
  • WinFrm應用程式調用WebService服務 關於WebService的創建、發佈與部署等相關操作不再贅述,傳送門如下:C# VS2019 WebService創建與發佈,並部署到Windows Server 2012R 此篇記錄一下客戶端的調用,以便後續學習使用,不足之處請指出。 建立WinF ...
x