前端css基础篇——position中能实现动态效果的sticky属性

最新推荐文章于 2024-06-17 18:04:45 发布

吃不起馒头

最新推荐文章于 2024-06-17 18:04:45 发布

阅读量2.7k

点赞数 2

文章标签： html css 定位 css3

本文链接：https://blog.csdn.net/weixin_44542562/article/details/107333874

版权

position:sticky（粘性定位）简介

sticky是position属性中新添的一个属性，它可以说是fixed和relative的结合。它主要作用在scroll的监听上，在滚动过程中，当某元素的距离其父元素的距离达到设定的sticky值的时候，这时position：sticky的作用就相当于fixed固定定位，固定在适当的位置，不随滚动条的滚动而发生变化。

使用条件
1. 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性；
2. 必须制定 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位；
3. 父元素的高度不能低于sticky元素的高度，否则还没有开始滚动的时候sticky元素就在父元素的底部，不会有任何的作用；
4. sticky元素仅在其父元素内生效，如果父元素都不能滚动的话，那么只能对视口其起作用；
特点
1.该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
2.当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。

在这里插入图片描述

当页面开始滚动的时候该块变成fixed定位

在这里插入图片描述

测试

我写了一个父元素，设置了overflow：scroll，里面包含了一些子元素，其中一个子元素的css样式设置了position：sticky，再给一个top值，代表了改子元素改变成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>
    <link rel="stylesheet" href="css/sticky.css">
</head>

<body>

    <div class="father">
        <div class="container">我是内容一</div>
        <div class="container">我是内容二</div>
        <div class="son">我是sticky</div>
        <div class="container">我是内容三</div>
        <div class="container">我是内容四</div>
        <div class="container">我是内容五</div>
    </div>


</body>

</html>

@charset "utf-8";
.father {
    width: 800px;
    height: 300px;
    background-color: aqua;
    overflow: scroll;
}

.son {
    width: 800px;
    height: 30px;
    background-color: rgb(255, 0, 0);
    position: sticky;
    top: 0px;
}

.container {
    width: 800px;
    height: 200px;
    background-color: rgb(255, 238, 0);
}

效果图：

静态：

在这里插入图片描述
滚动后：

在这里插入图片描述
改变top值后（改为30px）不能超过父元素的height

等到页面重新向上滚动回到原位，工具栏也会回到默认位置。

###sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。

吃不起馒头

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端css基础篇——position中能实现动态效果的sticky属性

position:sticky（粘性定位）简介sticky是position属性中新添的一个属性，它可以说是fixed和relative的结合。它主要作用在scroll的监听上，在滚动过程中，当某元素的距离其父元素的距离达到设定的sticky值的时候，这时position：sticky的作用就相当于fixed固定定位，固定在适当的位置，不随滚动条的滚动而发生变化。使用条件父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性；必须制定 top、bottom
复制链接

扫一扫