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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
JavaScript 监听textarea中按键事件
Oct 08 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
js显示文本框提示文字的方法
May 07 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
简单实现php上传文件功能
2017/09/21 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
基于angular实现三级联动的生日插件
2017/05/12 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python获取Linux发行版名称
2019/08/30 Python
Python telnet登陆功能实现代码
2020/04/16 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
生产部经理岗位职责
2013/12/16 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
后勤工作个人总结
2015/02/28 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
创业计划书之宠物店
2019/09/19 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL