jQuery仿gmail实现fixed布局的方法


Posted in Javascript onMay 27, 2015

本文实例讲述了jQuery仿gmail实现fixed布局的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fixed bar demo</title>
<style type="text/css" media="screen">
body{
margin:0;
height:2000px;
}
#top{
background-color:#333;
height:80px;
}
#nav{
background-color:#999;
height:30px;
position:absolute;
top:80px;
width:100%;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $(window).scroll(function(){
 var scrollTop = $(window).scrollTop();
 if(scrollTop < 80)
 $("#nav").css('top', '80px');
 else
 $("#nav").css('top', scrollTop +'px');
 });
});
</script>
</head>
<body>
<div id="top">
</div>
<div id="nav">
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript入门·对象属性方法大总结
Oct 01 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
csdn 批量接受好友邀请
Feb 19 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
js脚本中执行java后台代码方法解析
Oct 11 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
js实现键盘Enter键提交表单的方法
May 27 #Javascript
js实现简单锁屏功能实例
May 27 #Javascript
JS实现简单路由器功能的方法
May 27 #Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 #Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 #Javascript
js实现文本框选中的方法
May 26 #Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 #Javascript
You might like
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
JavaScript window.location对象
2014/11/14 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
几种响应式文字详解
2017/05/19 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
Python检测网络延迟的代码
2018/05/15 Python
Python变量访问权限控制详解
2019/06/29 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
新学期红领巾广播稿
2014/01/14 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
新农村建设汇报材料
2014/08/15 职场文书
汽车转让协议书范本
2014/12/07 职场文书
盗窃案辩护词
2015/05/21 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL