html中使用js+css使导航条（页面的一部分）在随页面滚动到顶部的时候停留在窗口边缘

本文链接：https://blog.youkuaiyun.com/carrousel0516/article/details/79679289
本文介绍了一个简单的HTML5页面布局示例，包括头部、导航栏、主要内容区域和底部区域等基本组成部分。通过内联样式实现了固定宽度和高度的布局效果，并使用JavaScript实现导航栏的固定显示功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!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>