jQuery仿gmail实现fixed布局的方法
更新时间：2015年05月27日 16:56:19 作者：不吃皮蛋
这篇文章主要介绍了jQuery仿gmail实现fixed布局的方法,涉及jQuery操作页面元素属性的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
下面小编就为大家带来一篇JQuery Mobile 弹出式登录框的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
事件是脚本编程的灵魂,本篇来介绍jQuery中的事件处理及事件对象.这里整理了详细的代码,有需要的小伙伴可以参考下。2016-10-10
这篇文章主要介绍了jQuery图片切换动画效果，处理动画延迟，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
最近在项目开发中遇到这样的需求，点击购买按钮，模拟抛物线将物品弹到购物车里，购物车添加物品后，显示+1动画。效果非常棒，接下来小编把实例代码分享到脚本之家平台，需要的的朋友参考下吧2017-05-05
这篇文章主要介绍了jquery实现浮动在网页右下角的彩票开奖公告窗口代码,涉及jquery窗体的弹出及隐藏相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了jQuery中prepend()方法用法,以实例形式较为详细的分析了prepend()方法的功能、定义及使用技巧,并对比分析了与text()方法的不同之处,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jQuery判断checkbox是否选中的3种方法,本文中的方法使用ID选择器实现,比网上其它的一些长篇大论的文章更加简练,需要的朋友可以参考下2014-08-08
注意引用的插件及顺序;搜索获取选择的值,智能感知连接外网搜索，具体实现如下，感兴趣的朋友可以参考下哈，希望对你大家有所帮助2013-05-05
这篇文章主要介绍了jQuery实现鼠标滚轮动态改变样式或效果,需要的朋友可以参考下2015-01-01
这篇文章主要是对JQuery中keyUp与keyDown的区别进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
最新评论