手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery仿gmail实现fixed布局的方法
jQuery仿gmail实现fixed布局的方法
摘要:本文实例讲述了jQuery仿gmail实现fixed布局的方法。分享给大家供大家参考。具体实现方法如下:fixedbardemobody{m...

本文实例讲述了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仿gmail实现fixed布局的方法】相关文章:

jquery实现图片左右切换的方法

JQuery中两个ul标签的li互相移动实现方法

JQuery中DOM实现事件移除的方法

jQuery判断指定id的对象是否存在的方法

Jquery动态添加输入框的方法

Javascript实现每日自动换一张图片的方法

jQuery处理图片加载失败的常用方法

jQuery实现表格行上移下移和置顶的方法

基于jquery实现下拉框美化特效

jQuery实现返回顶部效果的方法

精品推荐
分类导航