存粹是笔记呵呵
代码一：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>菜单固定在页面顶部测试</title> 6 <style type="text/css"> 7 *{margin:0 0; padding:0 0;border:0 none;} 8 9 .topMenuCss1{width:1000px; position:relative; top:0; background-color:#699;} 10 .topMenuCss2{width:1000px; position:fixed; top:0; background-color:#699;} 11 12 .btn{ margin:30px 30px; padding:5px 5px;} 13 </style> 14 <script type="text/javascript"> 15 function setTopMenuCssClass(i) 16 { 17 var topMenu=document.getElementById("topMenu"); 18 if(i==1) 19 { 20 topMenu.className="topMenuCss1"; 21 } 22 else if(i==2) 23 { 24 topMenu.className="topMenuCss2"; 25 } 26 } 27 window.onscroll=function () 28 { 29 var t = document.documentElement.scrollTop || document.body.scrollTop; 30 if(t<200) setTopMenuCssClass(1); 31 else setTopMenuCssClass(2); 32 }; 33 </script> 34 </head> 35 36 <body> 37 <div style="width:100%; height:200px; border:2px solid blue; background-color:#9C3; "></div> 38 39 <div style="margin:0 auto; padding:0 0; border:0 none; width:1000px;"> 40 <div id="topMenu" class="topMenuCss1"> 41 <a href="http://www.baidu.com" target="_blank" style="margin-right:20px;">项目1</a> 42 <a href="http://www.126.com" target="_blank" style="margin-right:20px;">项目2</a> 43 <a href="http://www.cnblogs.com" target="_blank" style="margin-right:20px;">项目3</a> 44 </div> 45 </div> 46 47 <br /><br /><br /> 48 <div> 49 <input id="css1" type="button" value="样式1" class="btn" onclick="setTopMenuCssClass(1);" /> 50 <input id="css2" type="button" value="样式2" class="btn" onclick="setTopMenuCssClass(2);" /> 51 </div> 52 53 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 54 111111111111111111111111111111 55 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 56 222222222222222222222222222222 57 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 58 333333333333333333333333333333 59 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 60 61 </body> 62 </html>
运行结果截图：
代码二：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>菜单固定在页面顶部测试2</title> 6 <style type="text/css"> 7 *{margin:0 0; padding:0 0;border:0 none;} 8 9 .menu100divCss1 10 { 11 background-color:#f00; margin:0 0; padding:0 0; border:0 none; 12 position:static; width:100%; height:20px; 13 } 14 .menu100divCss2 15 { 16 background-color:#f00; margin:0 0; padding:0 0; border:0 none; 17 position:fixed; width:100%; height:20px;top:0; 18 } 19 20 .topMenuCss1{width:1000px; position:relative; top:0; background-color:#699; height:20px;} 21 .topMenuCss2{width:1000px; position:fixed; top:0; background-color:#699; height:20px;} 22 23 .btn{ margin:30px 30px; padding:5px 5px;} 24 </style> 25 <script type="text/javascript"> 26 function setTopMenuCssClass(i) 27 { 28 var menu100div=document.getElementById("menu100div"); 29 var topMenu=document.getElementById("topMenu"); 30 if(i==1) 31 { 32 menu100div.className="menu100divCss1"; 33 topMenu.className="topMenuCss1"; 34 } 35 else if(i==2) 36 { 37 menu100div.className="menu100divCss2"; 38 topMenu.className="topMenuCss2"; 39 } 40 } 41 window.onscroll=function () 42 { 43 var t = document.documentElement.scrollTop || document.body.scrollTop; 44 if(t<200) setTopMenuCssClass(1); 45 else setTopMenuCssClass(2); 46 }; 47 </script> 48 </head> 49 50 <body> 51 <div style="width:100%; height:200px; border:2px solid blue; background-color:#9C3; "></div> 52 53 <div id="menu100div" class="menu100divCss1"> 54 <div style="margin:0 auto; padding:0 0; border:0 none; width:1000px;"> 55 <div id="topMenu" class="topMenuCss1"> 56 <a href="http://www.baidu.com" target="_blank" style="margin-right:20px;">项目1</a> 57 <a href="http://www.126.com" target="_blank" style="margin-right:20px;">项目2</a> 58 <a href="http://www.cnblogs.com" target="_blank" style="margin-right:20px;">项目3</a> 59 </div> 60 </div> 61 </div> 62 63 64 65 66 <br /><br /><br /> 67 <div> 68 <input id="css1" type="button" value="样式1" class="btn" onclick="setTopMenuCssClass(1);" /> 69 <input id="css2" type="button" value="样式2" class="btn" onclick="setTopMenuCssClass(2);" /> 70 </div> 71 72 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 73 111111111111111111111111111111 74 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 75 222222222222222222222222222222 76 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 77 333333333333333333333333333333 78 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 79 80 </body> 81 </html>
运行结果截图：
原文：http://www.cnblogs.com/huashanqingzhu/p/5244559.html