前言

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

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

请各位大神指教！

官网效果图

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

效果分析

1、在滚动条往下拉到一定距离后，往下拉导航栏消失。

2、当滚动条往上拉的时候，导航栏出现，并且拉到最上方的时候，导航栏效果是放大的。

解决思路

1、首先要监听滚动条的滚动方向。判断滚动方向，然后让导航栏发生隐藏显示事件。

2、 在滚动一定距离内，放大和缩小导航栏的大小。可以观察出导航栏的大小是因为Logo图片大小变化而引起的。这时候导航栏的高度可以让其自适应。

demo代码演示

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             #div1{

                 width: 100%;

                 /*使图片居中*/

                 text-align:center;

                 /*让其固定在页面上方*/

                 position: fixed;

                 left: 0;

                 top:0;

                 background-color: white;

             }

             #div2{

                 background-color: red;

                 height: 2000px;

             }

             #div1 img{

                 width: 73px;

                 height: 73px;

                 padding: 15px 0;

                 /*使大小变化有个过渡过程*/

                 transition: all 0.5s ease;

             }

         </style>

     </head>

     <body>

         <div id="div1">

             <img src="https://www.starbucks.com.cn/_themes/starbucks/img/logo.svg" alt="" />

         </div>

         <div id="div2">hhaha </div>

     </body>

     <script src="JQuery/jquery-3.1.1.js"></script>

     <script>

         //获取最开始的滚动距离

         var scrollBefore = $(document).scrollTop();

         $(document).scroll(function(){

             //获取当时的滚动距离

             var scrollAfter=$(document).scrollTop();

             //当滚动距离小于107的时候，导航栏是大的

             if(scrollAfter<107){

             $("#div1 img").css({width:"73px",height:"73px",padding:"15px 0"});

             };

             //当滚动距离大于107时，导航栏切换显示隐藏状态

             if(scrollAfter>=107){

                 //当滚动方向往下的时候，导航栏隐藏

                 if (scrollBefore < scrollAfter) {

                     $("#div1").slideUp("fast");

                     //当滚动方向往上的时候，导航栏显示，并且是小的。

                       } else {

                     $("#div1 img").css({width:"50px",height:"50px",padding:" 5px 0"});

                     $("#div1").slideDown("fast");

                        };

                      //给开始的导航距离赋值，可以进行比较

                     scrollBefore = scrollAfter;

                 };

             });

     </script>

 </html>

有点粗糙，不要嫌弃，旁边的菜单和登录没写，在变换的时候也改变了位置，加到里面就行。

我就偷了点懒，只写了Logo图片。

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

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

【方法】纯jQuery实现星巴克官网导航栏效果的更多相关文章

  1. 【分享】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  2. 利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）

    利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)   作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...

  3. 基于jQuery仿迅雷影音官网幻灯片特效

    分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html ...

  4. jQuery粘性跟随滚动条滚动的导航栏源代码下载

    jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...

  5. jQuery Validate （摘自官网）

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  6. python官网导航翻译

  7. 云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏

    一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目 鼠标放到新手入门显示对象的下拉列表 鼠标移开 ...

  8. jQuery实现侧边导航栏效果

    效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...

  9. 如何用jQuery实现在鼠标滚动后导航栏保持固定

    要实现如下效果,鼠标滚动后,上方导航栏置顶固定 关键html代码: <div class="header-bottom"> <div class="co ...

随机推荐

  1. 在Android上使用Socket

    原文地址:http://www.cnblogs.com/kross/p/3621952.html 考虑到以后可能要用到这方面的知识,就来写个Demo尝试下,其实以前学过,但不记得了……(用不到的东西各 ...

  2. java 数据结构与算法---树

    一.树的概念  除根节点外,其余节点有且只有一个父节点. 1.度 节点的度:每个节点的子节点个数. 树的度:树内各个节点的度的最大值. 树的高度(深度):树中节点的最大层次称为树的深度. 节点路径:一 ...

  3. C# 单例模式的多种简单实现

    什么是单例模式? 这里我就不做过多的解释了, 毕竟关于Singleton的资料实在是太多太多了.点击这里 1.简单的思路就是, 创建对象单例的动作转移到另外的行为上面, 利用一个行为去创建对象自身, ...

  4. ROC曲线和PR曲线绘制【转】

    TPR=TP/P :真正率:判断对的正样本占所有正样本的比例.  Precision=TP/(TP+FP) :判断对的正样本占判断出来的所有正样本的比例 FPR=FP/N :负正率:判断错的负样本占所 ...

  5. tomcat设置虚拟路径映射服务器指定的物理路径

    在tomcat的server.xml中的host标签中加入如下标签: <Context crossContext="false" debug="1" do ...

  6. python爬虫实战之bilibili弹幕生成云图

    突然想到了这个题目,先开了题,看能不能一次搞定,#后记,花了两天时间搞定的,一直想用自己的方法爬,但是效果都不好 首先去分析一下bilibili的网站请求,但是弹幕的异步传输的包抓不到(或者隐藏的好, ...

  7. 【python】爬虫实践

    参考链接 https://blog.csdn.net/u012662731/article/details/78537432 详解 python3 urllib https://www.jianshu ...

  8. 【洛谷4005】小Y和地铁（搜索）

    [洛谷4005]小Y和地铁(搜索) 题面 洛谷 有点长. 题解 首先对于需要被链接的两个点,样例中间基本上把所有的情况都给出来了. 但是还缺了一种从下面绕道左边在从整个上面跨过去在从右边绕到下面来的情 ...

  9. 【Cf #502 H】The Films（莫队）

    题面的简述:总共有$m$种书,书架上共有$n$本书,给出$n$本书的种类,并有$Q$个询问,每次询问给出$l, r, k$.每次询问时都会先出现$k * m$本书,每种书各$k$本,然后再加入书架上的 ...

  10. 【uoj219】 NOI2016—优秀的拆分

    http://uoj.ac/problem/219 (题目链接) 题意 一个字符串求它有多少个形如AABB的子串. Solution 其实跟后缀数组里面一个论文题poj3693处理方式差不多吧. 先处 ...