捧腹网的导航是如何做的呢？能随着页面的滚动而保持在最上面-ASP.NET教程-爱易网页

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

日期：2014-05-17　浏览次数：20577 次

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

------解决方案--------------------
如果不考虑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.

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>