编程 Javascript

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程序设计有所帮助。

- Author -

不吃皮蛋

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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