js 悬浮导航

最新推荐文章于 2022-04-17 00:00:59 发布

万花果子

最新推荐文章于 2022-04-17 00:00:59 发布

阅读量352

点赞数

分类专栏： JavaScript 文章标签： javascript 导航悬浮

本文链接：https://blog.csdn.net/sinat_27790827/article/details/51325583

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <title>悬浮导航</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        ul li{
            list-style: none;
        }
        body{
            height: 2000px;
        }
        #top{
            height: 300px;
            width: 100%;
            background-color: red;
        }
        #nav{
            height: 50px;
            line-height: 50px;
            width: 100%;
            background-color: pink; 
        }
        #nav ul{
            width: 1200px;
            margin: 0 auto;
        }
        #nav ul li{
            float: left;
            width: 164px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="top">
        顶部
    </div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
        </ul>
    </div>
</body>
<script>
    var ad = document.getElementById("nav")
    window.onscroll = function(){
        var _top = document.body.scrollTop || document.documentElement.scrollTop;//兼容
        if(_top>=300){
            ad.style.position = "fixed";
            ad.style.top = 0 +"px";
        }else{
            ad.style.position = "absolute";
            ad.style.top = 300+"px";
        }
    }
</script>