基于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的文本框记数器
Sep 19 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
微信小程序实现锚点功能
Nov 20 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
Python插件机制实现详解
2020/05/04 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python3处理word文档实例分析
2020/12/01 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
老人节标语大全
2014/10/08 职场文书
道歉的话语大全
2015/05/12 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书