前言
大冬天的没得玩，只能和代码玩。
所以就无聊研究了一下星巴克官网，在我看来应该是基本还原吧~
请各位大神指教！
官网效果图
要写的就是最上方的会闪现的白色条条
效果分析
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图片。
其实代码并不复杂，难的就是你怎么分析他的效果。
把他的效果分析的越简单，你写起来就简单！