捧腹网的导航是怎么做的呢？能随着页面的滚动而保持在最上面，

捧腹网的导航是怎么做的呢？能随着页面的滚动而保持在最上面，淘宝的也是。有没有人知道呢？谢谢！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

如果不考虑ie6，很简单，就几行css就行，要考虑ie6可以使用js
<!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>

</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>
跟悬浮广告的原理一样啊~~~~~~~~~~~~
      就是一个DIV层随页面的滚动改变位置。（也就是一直保持DIV居顶部和左边居）
css fixed来搞定的
<div class="jokeNav" id="navSwitch" style="position: fixed; top: 0px; left: 289px; z-index: 3; ">
                        <ul>
                            <li id="ZuiXinClass" class="link_1"><a onclick="_gaq.push(['_trackEvent', '首页', 'clicked', '头部导航-最新'])" href="http://www.pengfu.com/zuixin.html">最新</a></li>
                            <li id="ZuiXiangXiaoClass" class="link_2 clicks2"><a onclick="_gaq.push(['_trackEvent', '首页', 'clicked', '头部导航-最想笑'])" href="http://www.pengfu.com">最好笑</a></li>
                            <li id="ZuiJuRenQiClass" class="link_3"><a onclick="_gaq.push(['_trackEvent', '首页', 'clicked', '头部导航-最热闹'])" href="http://www.pengfu.com/zuijurenqi_1_1.html">最热闹</a> </li>
                            <li class="link_4"><a onclick="_gaq.push(['_trackEvent', '首页', 'clicked', '头部导航-精华图区'])" href="http://www.pengfu.com/jinghuatu_1.html">捧腹图片</a></li>
                            <li id="XiaoHuaClass" class="link_5"><a target="_self" href="http://www.pengfu.com/xiaohua_1.html">
                                捧腹笑话</a></li>
                        </ul>
                        <a name="comment"></a>
                    </div>
红色标注很重要
<!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>
用jquery 写的一个简单的，ie9 火狐谷歌测试没问题希望对你有所帮助
css:
position: fixed;
top: 0px;
left: 81px;
z-index: 3;
overflow: hidden;
height: 53px;
display: block;
http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/
淘宝悬浮在页面顶部的工具栏:
http://www.codefans.net/jscss/code/2150.shtml