粘性定位解析

哈密瓜Q

已于 2023-03-01 11:17:03 修改

阅读量559

点赞数

分类专栏：前端云笔记文章标签： css3 css html

于 2023-02-27 22:02:07 首次发布

本文链接：https://blog.csdn.net/m0_53062159/article/details/129250128

版权

前端同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

云笔记

5 篇文章 0 订阅

订阅专栏

粘性定位可认为是相对定位和固定定位的结合，元素在跨越特定阈值前表现为相对定位，之后表现为固定定位。粘性定位的元素依赖于用户的滚动，在 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>

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

注：

如果粘性定位元素的高度与其父元素的高度相等，粘性定位元素在粘性约束矩形中（父元素）将会没有实现粘性效果的活动空间，此时粘性失效。
粘性定位元素仅在其父元素内生效。

哈密瓜Q

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
粘性定位解析

粘性定位可认为是相对定位和固定定位的结合，元素在跨越特定阈值前表现为相对定位，之后表现为固定定位。粘性定位的元素依赖于用户的滚动，在 relative 与 fixed 定位之间切换。四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。该样例使黄色的块元素在距离顶部。该样例使黄色的块元素在距离顶部。
复制链接

扫一扫