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

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定位)。

前端css基础篇——position中能实现动态效果的sticky属性_第1张图片

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

前端css基础篇——position中能实现动态效果的sticky属性_第2张图片

测试

我写了一个父元素,设置了overflow:scroll,里面包含了一些子元素,其中一个子元素的css样式设置了position:sticky,再给一个top值,代表了改子元素改变成fixed定位时所在的位置,就实现了该粘性定位的效果。下面给出我的实现代码。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="css/sticky.css">
head>

<body>

    <div class="father">
        <div class="container">我是内容一div>
        <div class="container">我是内容二div>
        <div class="son">我是stickydiv>
        <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);
}

效果图:

静态:

前端css基础篇——position中能实现动态效果的sticky属性_第3张图片
滚动后:

前端css基础篇——position中能实现动态效果的sticky属性_第4张图片
改变top值后(改为30px)不能超过父元素的height
前端css基础篇——position中能实现动态效果的sticky属性_第5张图片
等到页面重新向上滚动回到原位,工具栏也会回到默认位置。

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

你可能感兴趣的:(html,css,定位,css3)