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(); //對象有特征 屬性;和 行為 方法 //添加屬 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...