基于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 相关文章推荐
jQuery中last()方法用法实例
Jan 06 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
理解javascript中的回调函数(callback)
2014/09/02 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
python简单实例训练(21~30)
2017/11/15 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
英语专业学生个人求职信
2014/01/28 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
《自己去吧》教学反思
2016/02/16 职场文书