基于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闭包的理解
Apr 01 Javascript
javascript无刷新评论实现方法
May 13 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
js实现显示手机号码效果
Mar 09 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP的PDO连接讲解
2019/01/24 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python微信公众号开发平台
2018/01/25 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
Form表单及django的form表单的补充
2019/07/25 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
会计试用期自我评价
2015/03/10 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书