【方法】纯jQuery实现星巴克官网导航栏效果
前言
大冬天的没得玩，只能和代码玩。
所以就无聊研究了一下星巴克官网，在我看来应该是基本还原吧~
请各位大神指教！
官网效果图
要写的就是最上方的会闪现的白色条条
效果分析
1、在滚动条往下拉到一定距离后，往下拉导航栏消失。
2、当滚动条往上拉的时候，导航栏出现，并且拉到最上方的时候，导航栏效果是放大的。
解决思路
1、首先要监听滚动条的滚动方向。判断滚动方向，然后让导航栏发生隐藏显示事件。
2、 在滚动一定距离内，放大和缩小导航栏的大小。可以观察出导航栏的大小是因为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>
有点粗糙，不要嫌弃，旁边的菜单和登录没写，在变换的时候也改变了位置，加到里面就行。
我就偷了点懒，只写了Logo图片。
其实代码并不复杂，难的就是你怎么分析他的效果。
把他的效果分析的越简单，你写起来就简单！
