自动跟随导航栏js+css

最新推荐文章于 2024-04-15 10:42:12 发布
wx_1998
最新推荐文章于 2024-04-15 10:42:12 发布
阅读量603
点赞数
在这里插入图片描述
<!DOCTYPE html>
<html lang=zh-cn>

<head>
    <meta charset=utf-8>
    <title>一个不带CSS样式的HTML5布局</title>
    <meta name=description content=一个不带CSS样式的HTML5布局>
    <meta name=author content=Roc>
    <meta name=copyright content=Roc>
    <link rel=shortcut icon href=favicon.ico>
    <link rel=apple-touch-icon href=custom_icon.png>
    <meta name=viewport content=width:device-width, user-scalable=no>
    <link rel=stylesheet href=main.css>
    <script src=script.js></script>
    <style>
        *{margin:0px;}
    a{text-decoration:none;}
    header,section,footer{width:1200px;margin:auto;}
    header{height:90px;}
    footer{background-color:#aaa;height:120px;}
    nav{
        width:100%;
        height:48px;
        line-height:48px;
        background-color:#D51938;
        color:white;            
    }
    nav div{
        width:1200px;
        margin:auto;
    }
    nav ul{
        list-style-type:none;
    }
    nav ul li{
        display:inline;
        padding:12px 30px;          
        line-height:48px;
    }
    nav a{color:white;}
    nav li:hover{background-color:#AA142D;}
</style>
    <script type="text/javascript">
        var mt = 0;
        window.onload = function () {
            var mydiv = document.getElementById("nav");
            var mt = mydiv.offsetTop;
            window.onscroll = function () {
                var t = document.documentElement.scrollTop || document.body.scrollTop;
                if (t > mt) {
                    mydiv.style.position = "fixed";
                    mydiv.style.top = "0";
                } else {
                    mydiv.style.position = "static";
                }
            }
        }
    </script>
</head>

<body>
    <header>HTML5文档的头部区域</header>
    <nav id="nav">
        <div>
            <ul>
                <a href="#">
                    <li>首页</li>
                </a>
                <a href="#">
                    <li>新房</li>
                </a>
                <a href="#">
                    <li>二手房</li>
                </a>
                <a href="#">
                    <li>经纪人</li>
                </a>
            </ul>
        </div>
    </nav>
    <section>
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
        HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
    </section>
    <footer>HTML5文档的脚部区域</footer>
</body>

</html>