基于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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php动态生成JavaScript代码
2009/03/09 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
web打印小结
2017/01/11 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
django初始化数据库的实例
2018/05/27 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
西式结婚主持词
2014/03/14 职场文书
党建工作汇报材料
2014/12/24 职场文书
项目安全员岗位职责
2015/02/15 职场文书
自我工作评价范文
2015/03/06 职场文书
美术教师求职信范文
2015/03/20 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
青年文明号创建口号大全
2015/12/25 职场文书