【方法】纯jQuery实现星巴克官网导航栏效果

最新推荐文章于 2022-06-11 11:51:27 发布

C84395836

最新推荐文章于 2022-06-11 11:51:27 发布

阅读量501

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/roashley/p/7862528.html

版权

前言

大冬天的没得玩，只能和代码玩。

所以就无聊研究了一下星巴克官网，在我看来应该是基本还原吧~

请各位大神指教！

官网效果图

要写的就是最上方的会闪现的白色条条

效果分析

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图片。

其实代码并不复杂，难的就是你怎么分析他的效果。

把他的效果分析的越简单，你写起来就简单！

转载于:https://www.cnblogs.com/roashley/p/7862528.html

C84395836

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【方法】纯jQuery实现星巴克官网导航栏效果

前言大冬天的没得玩，只能和代码玩。所以就无聊研究了一下星巴克官网，在我看来应该是基本还原吧~请各位大神指教！官网效果图要写的就是最上方的会闪现的白色条条效果分析1、在滚动条往下拉到一定距离后，往下拉导航栏消失。2、当滚动条往上拉的时候，导航栏出现，并且拉到最上方的时候，导航栏效果是放大的。解决思路...
复制链接

扫一扫