【方法】純jQuery實現星巴克官網導航欄效果

時間 2019-12-10

標籤方法 jquery 實現星巴克導航效果欄目 JQuery 简体版

原文原文鏈接

前言css

大冬天的沒得玩，只能和代碼玩。html

因此就無聊研究了一下星巴克官網，在我看來應該是基本還原吧~jquery

請各位大神指教！ide

官網效果圖svg

要寫的就是最上方的會閃現的白色條條spa

效果分析code

一、在滾動條往下拉到必定距離後，往下拉導航欄消失。htm

二、當滾動條往上拉的時候，導航欄出現，而且拉到最上方的時候，導航欄效果是放大的。blog

解決思路事件

一、首先要監聽滾動條的滾動方向。判斷滾動方向，而後讓導航欄發生隱藏顯示事件。

二、在滾動必定距離內，放大和縮小導航欄的大小。能夠觀察出導航欄的大小是由於Logo圖片大小變化而引發的。這時候導航欄的高度能夠讓其自適應。

demo代碼演示

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             #div1{
 8                 width: 100%;
 9                 /*使圖片居中*/
10                 text-align:center;
11                 /*讓其固定在頁面上方*/
12                 position: fixed;
13                 left: 0;
14                 top:0;
15                 background-color: white;
16             }
17             #div2{
18                 background-color: red;
19                 height: 2000px;    
20             }
21             #div1 img{
22                 width: 73px;
23                 height: 73px;
24                 padding: 15px 0;
25                 /*使大小變化有個過渡過程*/
26                 transition: all 0.5s ease;
27             }
28         </style>
29     </head>
30     <body>
31         <div id="div1">
32             <img src="https://www.starbucks.com.cn/_themes/starbucks/img/logo.svg" alt="" />
33         </div>
34         <div id="div2">hhaha </div>
35     </body>
36     <script src="JQuery/jquery-3.1.1.js"></script>
37     <script>
38         //獲取最開始的滾動距離
39         var scrollBefore = $(document).scrollTop();
40         $(document).scroll(function(){
41             //獲取當時的滾動距離
42             var scrollAfter=$(document).scrollTop();
43             //當滾動距離小於107的時候，導航欄是大的
44             if(scrollAfter<107){
45             $("#div1 img").css({width:"73px",height:"73px",padding:"15px 0"});
46             };
47             //當滾動距離大於107時，導航欄切換顯示隱藏狀態
48             if(scrollAfter>=107){
49                 //當滾動方向往下的時候，導航欄隱藏
50                 if (scrollBefore < scrollAfter) {
51                     $("#div1").slideUp("fast");
52                     //當滾動方向往上的時候，導航欄顯示，而且是小的。
53                       } else {
54                     $("#div1 img").css({width:"50px",height:"50px",padding:" 5px 0"});
55                     $("#div1").slideDown("fast");
56                        };
57                      //給開始的導航距離賦值，能夠進行比較
58                     scrollBefore = scrollAfter;
59                 };
60             });
61     </script>
62 </html>