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的目的分析
Jan 05 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
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
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
python获取网页状态码示例
2014/03/30 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Python for i in range ()用法详解
2020/09/18 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
python实现井字棋小游戏
2020/03/04 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
手机业务员岗位职责
2013/12/13 职场文书
单位在职证明范本
2014/01/09 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
保险公司演讲稿
2014/09/02 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
《观潮》教学反思
2016/02/17 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang