CSS position属性sticky实现吸顶菜单效果

itomcoil 2025-02-04 14:23 35 浏览

CSS的position属性用于指定元素在文档流中的定位方式，position属性和top、bottom、left、right属性一起决定元素的最终位置。position属性拥有static、relative、absolute、fixed、sticky五个可选项，下面动画展示了一个吸顶导航菜单的样式，当向上滚动页面时导航菜单始终黏在顶部位置，使用sticky属性可以轻松实现这个效果。

在正式引出sticky特性之前，有必要重新回顾下position各个属性的特征，真正理解了它们的含义用起来才会得心应手，出现问题也有清晰的思路去排查并解决它，而且理解sticky也依赖对其他属性的理解。

static是默认行为

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。见下图黄色方框的位置，它所在的位置就是正常文档流应在的位置。

relative是相对原位置的偏移

该关键字下，元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置。继续看黄色方框，假如仅仅设置position为relative的话，黄色方框的位置和static位置是一样的，也就是它按照正常文档流布局，但是此时top、left、right、bottom属性会改变黄色方框的位置，示例中黄色方框相对于原有位置向左、向下偏移了40px。

absolute是相对父级元素的偏移

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。包裹黄色方框的元素position被设置为relative，那么黄色方框就会依据其父级元素的位置为基准进行定位，示例中它相对于父级元素向左、向下偏移40px。

fixed是相对于视口的偏移

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。下面的示例点击固定定位后，黄色方框移到了浏览器视口向左、向下40px的位置，且无论页面如何滚动，黄色框的位置始终和浏览器视口相对位置不变。

sticky是relative和fixed的结合体

最后，终于说到了ticky属性，它是relative和fixed属性的结合体，示例中黄色方框的样式设置为"position: sticky; top: 20px;"，为了演示sticky的效果，将其上级元素设置了一个固定的高度并显示滚动条，当黄色方框与父元素的顶部高度大于20px时，它表现出relative的行为（也和static相似），正常布局到文档流中；当达到top为20px阈值之后，黄色方框始保持top=20px的位置，表现出黏在顶端的效果，此时表现出fixed的行为。

最后给出上面演示示例的完整源码，实际运行并点击每个选项实际体验一下，相信理解会更加深刻：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css position演示</title>
    <style>
        body {
            font-size: larger;
        }

        .box {
            float: left;
            margin: 1rem;
            width: 100px;
            height: 100px;
            border: 3px solid #00f;
            background: rgba(0, 0, 255, .2);
        }

        #example-element {
            border: 3px solid #f00;
            background: rgba(255, 255, 0, .6);
        }

        #example-option {
            display: flex;
            flex-flow: column;
        }

        table {
            border-collapse: collapse;
            border: 1px solid gray;
        }

        td {
            padding: 16px;
            border-right: 1px solid gray;
        }

        button {
            margin: 0.5rem;
            padding: 1rem 2rem;
        }
    </style>
</head>

<body>
    <h1>Position属性效果演示</h1>
    <table>
        <tr>
            <td id="example-option">
                <button onclick="updateStyle('static')">
                    默认定位 <br>
                    position: static;
                </button>
                <button onclick="updateStyle('relative')">
                    相对定位<br>
                    position: relative;
                    top: 40px; left: 40px;
                </button>
                <button onclick="updateStyle('absolute')">
                    绝对定位<br>
                    position: absolute;
                    top: 40px; left: 40px;
                </button>
                <button onclick="updateStyle('fixed')">
                    固定定位<br>
                    position: fixed;
                    top: 40px; left: 40px;
                </button>
                <button onclick="updateStyle('sticky')">
                    粘性定位<br>
                    position: sticky;
                    top: 20px;
                </button>
            </td>
            <td id="output">
                <div style="height: 452px;overflow: scroll;">
                    <div style="position: relative;">
                        <p>这个示例演示css position属性</p>
                        <br>
                        <br>
                        <br>
                        <div class="box"></div>
                        <div class="box" id="example-element"></div>
                        <div class="box"></div>
                        <p style="clear: left;">为了演示position: sticky效果</p>
                        <p>这里增加了一个可滚动的容器</p>
                        <p>上下滚动这段内容</p>
                        <p>你将发现黄色框会始终停留在视线范围内</p>
                        <p>就像黏在在顶部一样</p>
                        <p>重新向下滚动</p>
                        <p>黄色框还会恢复到原来的位置</p>
                        <p>使用sticky特性</p>
                        <p>可以实现很多特效</p>
                        <p>比如始终黏在顶部的菜单栏</p>
                        <p>发挥想象力还可以实现其他效果...</p>
                    </div>
                </div>
            </td>
        </tr>
    </table>

    <script>
        function updateStyle(position_mode) {
            let box = document.getElementById("example-element")
            if (position_mode == 'static') {
                box.style = ""
            } else if (position_mode == 'relative') {
                box.style = "position: relative; top: 40px; left: 40px;"
            } else if (position_mode == 'absolute') {
                box.style = "position: absolute; top: 40px; left: 40px;"
            } else if (position_mode == 'fixed') {
                box.style = "position: fixed; top: 40px; left: 40px;"
            } else if (position_mode == 'sticky') {
                box.style = "position: sticky; top: 20px;"
            }
        }
    </script>
</body>

</html>

参考文献

[1]. https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

sticky css

上一篇：Python 100个函数及代码!码住（python函数经典例程）
下一篇：Html之position粘性定位（css粘性定位）

CSS position属性sticky实现吸顶菜单效果

相关推荐

我用 1 个 2 手计算器换了 3 台 MacBook(上)

零基础也能搞定!DeepSeek大模型本地安装全攻略

Win7中同时安装python2和python3的方法

Python三目运算符(三元运算符)用法详解

PS零基础入门教程:Photoshop 2024工具详解—标尺工具

按颜色计数、求和、算平均值或最大值?学这个函数就够啦!

SpringBoot中使用LocalDateTime踩坑记录

PS 零基础入门 040:图层样式选项

PS零基础入门教程:Photoshop 2024工具详解—直线工具

a4尺寸是多大像素多少厘米长宽，4k的纸是多大的纸是a4的吗