吸顶效果的两种实现方式

小屁孩你滑稽掉了

于 2023-12-04 19:51:41 发布

阅读量591

点赞数 3

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_49698477/article/details/134792451

版权

第一种：使用fixed定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            height: 100px;
            background-color: hotpink;
        }
        nav{
            width: 100%;
            height: 80px;
            background-color: #ccc;
        }
        main{
            width: 100%;
            height: 2000px;
            background-color: yellow;
        }
        .fd{
            position: fixed;
            top: 0;   
        }
    </style>
</head>
<body>
    <header>网页头部区域</header>
    <nav>网页导航区域</nav>
    <main>主要内容区域</main>
    <script>
        var nav = document.getElementsByTagName('nav')[0]

        onscroll = function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            if(scrollTop>=100){
                // 吸顶，给元素设置固定定位
                // className 通过这个属性添加一个类名
                nav.className = 'fd'
            }else{
                // 取消吸顶
                nav.className = ''
            }
        }
    </script>
</body>
</html>

第二种：使用sticky定位

关于sticky定位是什么可以参考这篇文章：sticky定位详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            height: 100px;
            background-color: hotpink;
        }
        nav{
            width: 100%;
            height: 80px;
            background-color: #ccc;
        }
        main{
            width: 100%;
            height: 2000px;
            background-color: yellow;
        }
        .fd{
            position: sticky;
            top: 0;
            right: 0;
            bottom: calc(100% - 180px);
            left: 0;   
        }
    </style>
</head>
<body>
    <header>网页头部区域</header>
    <nav>网页导航区域</nav>
    <main>主要内容区域</main>
    <script>
        var nav = document.getElementsByTagName('nav')[0]

        onscroll = function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            if(scrollTop>=100){
                // 吸顶，给元素设置固定定位
                // className 通过这个属性添加一个类名
                nav.className = 'fd'
            }else{
                // 取消吸顶
                nav.className = ''
            }
        }
    </script>
</body>
</html>