基于jquery固定于顶部的导航响应浏览器滚动条事件


Posted in Javascript onNovember 02, 2014

今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部。效果图如下:

基于jquery固定于顶部的导航响应浏览器滚动条事件

实现的代码:

html代码:

<div id="page">
<div id="toolbar" data-0="height:192px" data-128="height: 64px">
<div id="actions">
<div class="icon">
<svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="menu">
<path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z">
</path>
</g>
</svg>
</div>
<div class="spacer">
</div>
<div class="icon">
<svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="search">
<path d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1,3,9.5,3C5.9,3,3,5.9,3,9.5S5.9,16,9.5,16c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1.5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5C12,5,14,7,14,9.5S12,14,9.5,14z">
</path>
</g>
</svg>
</div>
<div class="icon">
<svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="more-vert">
<path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z">
</path>
</g>
</svg>
</div>
</div>
<div id="title" data-0="font-size: 48px; padding: 0 0 24px 12px;" data-128="font-size: 18px; padding: 0 0 21px 60px;">
Page Title
</div>
</div>
<div id="content" data-0="padding-top: 192px;" data-192="padding-top: 190px;">
<div class="card">
Content goes here!
</div>
<div class="card">
Content goes here!
</div>
<div class="card">
Content goes here!
</div>
<div class="card">
Content goes here!
</div>
<div class="card">
Content goes here!
</div>
<div class="card">
Content goes here!
</div>
<div class="card">
Content goes here!
</div>
</div>
</div>
<script src='jquery.js'></script>
<script src='skrollr.min.js'></script>
<script> $(document).ready(function () {
skrollr.init({ smoothScrolling: true });
}); //@ sourceURL=pen.js
</script>

css代码:

html, body {
background: #fafafa;
color: #1BBBFB;
font-family: sans-serif;
}

#page {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

#toolbar {
display: block;
position: fixed;
width: 100%;
z-index: 10;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #1BBBFB;
padding: 0 16px;
}

#actions {
position: relative;
display: flex;
align-items: center;
flex-direction: row;
height: 64px;
top: 0;
left: 0;
right 0;
}

#actions .icon {
padding: 7px;
margin: 2px;
vertical-align: middle;
}

#actions .spacer {
flex: 1;
}

#actions svg {
display: inline-block;
pointer-events: none;
position: relative;
vertical-align: middle;
width: 24px;
height: 24px;
fill: #fff;
}

#title {
padding: 21px;
position: absolute;
bottom: 0;
color: #fff;
}

#content {
display: block;
position: relative;
padding: 24px;
}

.card {
display: block;
position: relative;
width: 60%;
height: 100px;
border: 1px solid #1BBBFB;
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;
background-color: #fff;
margin: 16px auto;
padding: 24px;
}
Javascript 相关文章推荐
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery ajax serialize() 方法使用示例
Nov 02 #Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 #Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 #Javascript
js实现文章文字大小字号功能完整实例
Nov 01 #Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 #Javascript
js实现按钮加背景图片常用方法
Nov 01 #Javascript
js实现网页随机切换背景图片的方法
Nov 01 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
javascript实现下雨效果
2017/03/27 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python批量修改文本文件内容的方法
2016/04/29 Python
python实现批量修改文件名代码
2017/09/10 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
python 常见的排序算法实现汇总
2020/08/21 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
实习单位推荐信范文
2013/11/27 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL