捧腹网的导航是怎么做的呢？能随着页面的滚动而保持在最上面，淘宝的也是。有没有人知道呢？谢谢！
------解决方案--------------------------------------------------------
如果不考虑ie6，很简单，就几行css就行，要考虑ie6可以使用js
- HTML code
<!doctype html><html><head><!doctype html><html><head><style>html,body{margin:0;padding:0;}#y1 {position:fixed;top:0;width:100%;height:100px;margin:auto;text-align:center;}</style><!--[if lte IE 6]><style>#y1 {position:absolute;}</style><![endif]--></head><body style="padding-top:102px"><div id="y1"> <div style="backgroind:orange;border:1px solid red;height:100px;width:1000px;margin:auto;">导航内容</div> </div><script>//以下所有脚本只为IE6写，其他浏览器完全可以删除。function getViewportScrollX(){ var scrollX=0; if(document.documentElement&&document.documentElement.scrollLeft){ scrollX=document.documentElement.scrollLeft;} else if(document.body&&document.body.scrollLeft){ scrollX=document.body.scrollLeft;} else if(window.pageXOffset){ scrollX=window.pageXOffset;} else if(window.scrollX){ scrollX=window.scrollX;} return scrollX;}function getViewportScrollY(){ var scrollY=0; if(document.documentElement&&document.documentElement.scrollTop){ scrollY=document.documentElement.scrollTop;} else if(document.body&&document.body.scrollTop){ scrollY=document.body.scrollTop;} else if(window.pageYOffset){ scrollY=window.pageYOffset;} else if(window.scrollY){ scrollY=window.scrollY;} return scrollY;}function getViewportWidth() { var width=0; if(document.documentElement && document.documentElement.clientWidth){ width=document.documentElement.clientWidth;} else if(document.body && document.body.clientWidth){ width=document.body.clientWidth;} else if(window.innerWidth){ width=window.innerWidth-18;} return width;}function getViewportHeight(){ var height=0; if(window.innerHeight){ height=window.innerHeight-18;} else if(document.documentElement&&document.documentElement.clientHeight){ height=document.documentElement.clientHeight;} else if(document.body&&document.body.clientHeight){ height=document.body.clientHeight;} return height;}if(navigator.userAgent.indexOf("MSIE 6") >-1 && navigator.userAgent.indexOf("MSIE 7") == -1 && navigator.userAgent.indexOf("MSIE 8") == -1){ window.ononload=window.onscroll=window.onresize=function(e){ var t = getViewportScrollY(); var l = getViewportScrollX(); var w = getViewportWidth(); var h = getViewportHeight(); document.getElementById("y1").style.left=l+"px"; document.getElementById("y1").style.top=t+"px"; }}</script><p>其他内容</p></body>
------解决方案--------------------------------------------------------
- HTML code
<!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>无标题文档</title> <style type="text/css"> .div1 ul li { display: inline-block; line-height: 20px; } .div1 ul { background: #00FF00; text-align: center; width:1000px; } .ul2 { position:fixed; top:0; width:1000px;} .ul3 { width:100%; background:#F00;} </style> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $(document).scroll(function () {//滚动条滚动时候触发的事件 //alert($(document).scrollTop()); if ($(document).scrollTop() >= 193) { //alert("193了 你看着办吧！"); $("#ul1").addClass("ul2"); } else { $("#ul1").removeClass("ul2").addClass("ul3"); } }) }); </script></head><body> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div class="div1"> <ul id="ul1"> <li>首页</li> <li>第一个</li> <li>第二个</li> <li>第三个</li> </ul> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /></body></html>