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(); //對象有特征 屬性;和 行為 方法 //添加屬 ...
一周排行
  • 本文將介紹如何在.NET Core3環境下使用MVVM框架Prism的使用事件聚合器實現模塊間的通信 一.事件聚合器 在上一篇 ".NET Core 3 WPF MVVM框架 Prism系列之模塊化" 我們留下了一些問題,就是如何處理同模塊不同窗體之間的通信和不同模塊之間不同窗體的通信,Prism提 ...
  • Microsoft Visual Studio 2010 的項目為件改為Microsoft Visual Studio 2015預設打開 2010 的Solution (.Sln) file 更改為 2015 的Solution (.Sln) file ...
  • 設計一個簡單的登錄視窗,要求輸入用戶名:小金,密碼:123456時候點登錄能正確轉到另一個視窗。 1、建立窗體應用。 2、這裡創建一個login和一個NewForm的窗體。 3、在login的窗體拖拉2個label和2個textbox和1個linklabel的控制項。一個標簽名字為用戶名,一個標簽為密 ...
  • 已有站點:HTTP80 %systemroot%\system32\inetsrv\APPCMD ADD APP /SITE.NAME:"HTTP80" /path:/Redirect /physicalPath:"C:\Windows\System32\drivers\etc" /applicat ...
  • ``` var xmlstr = @" some_appid 1413192605 component_verify_ticket some_verify_ticket "; Stopwatch sw = Stopwatch.StartNew(); for (int i = 0; i ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7640873.html,記錄一下學習過程以備後續查用。 一、引言 很多人說原型設計模式會節省機器記憶體,他們說是拷貝出來的對象是原型的複製,不會使用記憶體。我認為這是不對的,因為拷貝出來的每一個對象都是實際 存在的 ...
  • 實現把String字元串轉化為In後可用參數代碼: public string StringToList(string aa) { string bb1 = "("; if (!string.IsNullOrEmpty(aa.Trim())) { string[] bb = aa.Split(new ...
  • 1.ImportData主方法 把傳入為object數組類型,按照下標取出對應的參數,此處為Table和Username public object[] ImportData(object[] Param) { DataTable dt = (DataTable)Param[0]; string m ...
  • C#實現對Excel操作,根據數據的類型不同或者來源不同會放在不同的頁簽中,C#實現添加頁簽代碼如下:(path為文檔保存的地址,dt為要處理的源數據) public void addSheet(string Path, DataTable dt) { var SlDoc = new SLDocum ...
  • public partial class Form1 : Form { public Form1() { InitializeComponent(); Dog dog = new Dog(); InsertDog(dog); dog.OnAlert(); //Console.WriteLine(); ...
x