js网页吸顶

最新推荐文章于 2023-07-19 17:30:16 发布

海龟先生plus

最新推荐文章于 2023-07-19 17:30:16 发布

阅读量154

点赞数

分类专栏： js 文章标签：网页吸顶

本文链接：https://blog.csdn.net/qq_45219069/article/details/94466396

版权

js 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

 <style>
        *{
            margin: 0px;
            padding: 0Px;
        }
        header{
            width: 100%;
            height: 200px;
            background-color: #ccc;
            text-align: center;
            line-height: 200px;
            font-size: 20px;
        }
        nav{
            width: 100%;
            height: 80px;
            background-color:gold;
            text-align: center;
            line-height: 80px;
            font-size: 20px;
        }
        main{
            width: 100%;
            height: 800px;
            background-color:greenyellow;
            text-align: center;
            line-height: 800px;
            font-size: 20px;
        }
        footer{
            width: 100%;
            height: 100px;
            background-color:pink;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }
        .dw{
            position: fixed;
            top: 0;
            left: 0;
            opacity: 0.4;
            transition: 2s;
        }
    </style>
</head>
<body>
    <header>我是头部</header>
    <nav>我是导航 </nav>
    <main>我是内容</main>
    <footer>我是底部</footer>
    <script>
        var navs=document.querySelectorAll("nav")//是获取页面上所有的nav，是一个数组，故后面是navvs[0]
        window.onscroll=function(){             //可以用document.querySelector（），直接是nav这个元素
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
            // console.log(scrollTop);
            if(scrollTop>=200){
                console.log(scrollTop);
                
                navs[0].className="dw"
            }else{
                navs[0].className=""
            }
        }
        
    </script>
</body>

在这里插入图片描述