jQuery仿gmail实现fixed布局的方法

这篇文章主要介绍了jQuery仿gmail实现fixed布局的方法,涉及jQuery操作页面元素属性的相关技巧,需要的朋友可以参考下

本文实例讲述了jQuery仿gmail实现fixed布局的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>fixed bar demo</title> 
7. <style type="text/css" media="screen"> 
8. body{ 
9. margin:0; 
10. height:2000px; 
11. } 
12. #top{ 
13. background-color:#333; 
14. height:80px; 
15. } 
16. #nav{ 
17. background-color:#999; 
18. height:30px; 
19. position:absolute; 
20. top:80px; 
21. width:100%; 
22. } 
23. </style> 
24. <script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
25. <script type="text/javascript"> 
26. $(function(){ 
27. $(window).scroll(function(){ 
28. var scrollTop = $(window).scrollTop(); 
29. if(scrollTop < 80) 
30. $("#nav").css('top', '80px'); 
31. else 
32. $("#nav").css('top', scrollTop +'px'); 
33. }); 
34. }); 
35. </script> 
36. </head> 
37. <body> 
38. <div id="top"> 
39. </div> 
40. <div id="nav"> 
41. </div> 
42. </body> 
43. </html> 

希望本文所述对大家的jQuery程序设计有所帮助。