【方法】纯jQuery实现星巴克官网导航栏效果
前言
大冬天的没得玩，只能和代码玩。
所以就无聊研究了一下星巴克官网，在我看来应该是基本还原吧~
请各位大神指教！
官网效果图
要写的就是最上方的会闪现的白色条条
效果分析
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实现星巴克官网导航栏效果的更多相关文章
- 【分享】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
- 利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）
利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录) 作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...
- 基于jQuery仿迅雷影音官网幻灯片特效
分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html ...
- jQuery粘性跟随滚动条滚动的导航栏源代码下载
jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...
- jQuery Validate （摘自官网）
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- python官网导航翻译
- 云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏
一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目 鼠标放到新手入门显示对象的下拉列表 鼠标移开 ...
- jQuery实现侧边导航栏效果
效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...
- 如何用jQuery实现在鼠标滚动后导航栏保持固定
要实现如下效果,鼠标滚动后,上方导航栏置顶固定 关键html代码: <div class="header-bottom"> <div class="co ...
随机推荐
- mysql-master-ha 实现mysql master的高可用。
常用的mysql 高可用有下面几种方案: 名称 原理 特点 mysqlmha Perl脚本对mysql master做心跳,master down了以后,选举new master ,是要改代理层的 ...
- DAY6-Flask项目
1.ViewModel:处理原始数据:裁剪修饰合并 2.访问静态资源 默认情况下,访问的路径为app根目录的下的static文件,为什么说app是根目录而不是fisher.py下,因为在实例化对象的时 ...
- mysql内外连接
更新于2017-12-13,在今天的一个面试里面被问到了left/right outer join,回答上来了.但又问了一下inner join ,一下子记不清inner jion是个什么东西了.这次 ...
- c++11 委托构造
c++11 委托构造 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #includ ...
- [CF1110E]Magic Stones
题目大意:有一个长度为$n(n\leqslant10^5)$的数列$c$,问是否可以经过若干次变换变成数列$t$,一次变换为$c'_i=c_{i+1}+c_{i-1}-c_i$ 题解:思考一次变换的本 ...
- python之插入排序
插入排序的基本操作就是将一个数据插入到已经排好序的有序数据中,从而得到一个新的.个数加一的有序数据,算法适用于少量数据的排序,时间复杂度为O(n^2).是稳定的排序方法.插入算法把要排序的数组分成两部 ...
- CH3101 阶乘分解
题目链接 分解\(n!\)的质因数,输出相应的\(p_i\)和\(c_i\). 其中\(1\leq n\leq 10^6\). 考虑每一个质因子 \(p\) 在 \(n!\) 中出现的次数.显然, ...
- mysql 中的共享锁和排他锁
共享锁(share lock) 共享锁又称读锁,是读取操作创建的锁.其他用户可以并发读取数据,但任何事务都不能对数据进行修改(获取数据上的排他锁),直到已释放所有共享锁. 如果事务T对数据A加上共享锁 ...
- 学些goosman-lei的博客感触
在进行程序员职业规划标题搜索的时候,csdn推荐了<专访雷果国:从1.5K到18K 一个程序员的5年成长之路>感触颇深链接:https://www.csdn.net/article/201 ...
- 编译geth报错的解决方法 make: *** [geth] 错误 1
在centos下安装了go1.9.1版本,编译go-ethereum时报错: [root@localhost go-ethereum]# make gethbuild/env.sh go run bu ...