粘性定位解析

news2025/1/31 3:00:47

粘性定位可认为是相对定位和固定定位的结合，元素在跨越特定阈值前表现为相对定位，之后表现为固定定位。粘性定位的元素依赖于用户的滚动，在 relative 与 fixed 定位之间切换。

须指定 top、right、bottom 、left 四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。

element {
    position: sticky;
    top: 50px;
}

样例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性定位</title>
    <style>
        .box {
            height: 1200px;
            border: 1px solid rgb(109, 13, 218);
        }

        .left {
            float: left;
            height: 1200px;
            width: 500px;
            background-color: blue;
        }

        .right {
            position: sticky;
            top: 50px;
            float: left;
            height: 400px;
            width: 700px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <nav style="height: 200px; width: 100%; background-color: red;"></nav>
    <div class="box">
        <div class="left"></div>
        <div class="right">粘性定位的元素</div>
    </div>
    <div style="clear: both; height: 500px; background-color: green"></div>
</body>

</html>

该样例使黄色的块元素在距离顶部50px的距离时不再往顶部移动（父元素不具有实现粘性效果的活动空间时黄色块元素仍会往顶部移动），即表现为固定定位，运行结果如下：
在这里插入图片描述
样例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性定位</title>
    <style>
        .box {
            height: 1100px;
            border: 1px solid rgb(109, 13, 218);
        }
        .left {
            height: 800px;
            width: 700px;
            background-color: blue;
        }
        .right {
            position: sticky;
            bottom: 50px;
            height: 300px;
            width: 700px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <nav style="height:1200px; width: 100%; background-color: red;"></nav>
    <div class="box">
        <div class="left"></div>
        <div class="right">粘性定位的元素</div>
    </div>
    <div style="clear: both; height: 200px; background-color: green"></div>
</body>

</html>