一.sticky用法

使用 CSS Sticky 需要两个条件。

position: sticky;
top: 0;    /*top/right/bottom/left 任一有效值*/

top:0 意思是当元素滑动到距离视口 0px 时再继续滑动,元素吸顶。






1.1 示例1

在这里插入图片描述
在这里插入图片描述





在这里,将图中绿色部分的div中的position定义为sticky,同时指定了top为0(即吸顶的时候距离顶部距离为0),并通过z-index确定覆盖顺序,保证定位02覆盖在01之上。完整代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sticky吸顶</title>
  <style>
    div.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: 5px;
      background-color: #cae8ca;
      border: 2px solid #4CAF50;
    }
  </style>
</head>
<body>

<p>尝试滚动页面。</p>

<div>
  <div class="sticky" style="z-index: 1">我是粘性定位!</div>

  <div>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>


  </div>

  <div class="sticky" style="z-index: 2">我是粘性定位02!</div>
  <div >
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>


  </div>
</div>
</body>
</html>






1.2 示例2

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述






这里实现的主要是表格中表头的固定,完整代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 2rem;
    }

    .table-container{
      width: 100%;
    }

    table {
      text-align: center;
      width: 100%;
    }

    tr.red th {
      background: #ff4b4b;
    }

    tr.green th {
      background: #0db50d;
    }

    tr td {
      padding: 8px 4px;
    }

    /*表头实现固定*/
    tr th {
      position: sticky;
      top: 0;
      padding: 10px 4px;
      color: #fff;
    }
  </style>
</head>
<body>
<div class="table-container">
  <table>
    <thead>
    <tr class="red">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Lorem.</td>
      <td>Ullam.</td>
      <td>Vel.</td>
      <td>At.</td>
      <td>Quis.</td>
    </tr>
    <tr>
      <td>Quas!</td>
      <td>Velit.</td>
      <td>Quisquam?</td>
      <td>Rerum?</td>
      <td>Iusto?</td>
    </tr>
    <tr>
      <td>Voluptates!</td>
      <td>Fugiat?</td>
      <td>Alias.</td>
      <td>Doloribus.</td>
      <td>Veritatis.</td>
    </tr>
    <tr>
      <td>Maiores.</td>
      <td>Ab.</td>
      <td>Accusantium.</td>
      <td>Ullam!</td>
      <td>Eveniet.</td>
    </tr>
    <tr>
      <td>Hic.</td>
      <td>Id!</td>
      <td>Officiis.</td>
      <td>Modi!</td>
      <td>Obcaecati.</td>
    </tr>
    <tr>
      <td>Soluta.</td>
      <td>Ad!</td>
      <td>Impedit.</td>
      <td>Alias!</td>
      <td>Ad.</td>
    </tr>
    <tr>
      <td>Expedita.</td>
      <td>Quo.</td>
      <td>Exercitationem!</td>
      <td>Optio?</td>
      <td>Ipsum?</td>
    </tr>
    <tr>
      <td>Commodi!</td>
      <td>Rem.</td>
      <td>Aspernatur.</td>
      <td>Accusantium!</td>
      <td>Maiores.</td>
    </tr>
    <tr>
      <td>Omnis.</td>
      <td>Cumque?</td>
      <td>Eveniet!</td>
      <td>Mollitia?</td>
      <td>Vero.</td>
    </tr>
    <tr>
      <td>Error!</td>
      <td>Inventore.</td>
      <td>Quasi!</td>
      <td>Ducimus.</td>
      <td>Repudiandae!</td>
    </tr>
    <tr>
      <td>Dolores!</td>
      <td>Necessitatibus.</td>
      <td>Corrupti!</td>
      <td>Eum.</td>
      <td>Sunt!</td>
    </tr>
    <tr>
      <td>Ea.</td>
      <td>Culpa?</td>
      <td>Quam?</td>
      <td>Nemo!</td>
      <td>Sit!</td>
    </tr>
    <tr>
      <td>Veritatis!</td>
      <td>Facilis.</td>
      <td>Expedita?</td>
      <td>Ipsam!</td>
      <td>Omnis!</td>
    </tr>
    <tr>
      <td>Vitae.</td>
      <td>Cumque.</td>
      <td>Repudiandae.</td>
      <td>Ut?</td>
      <td>Sed!</td>
    </tr>
    <tr>
      <td>Accusantium.</td>
      <td>Adipisci.</td>
      <td>Sit.</td>
      <td>Maxime.</td>
      <td>Harum.</td>
    </tr>
    <tr class="green">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
    <tr>
      <td>Qui!</td>
      <td>Accusamus?</td>
      <td>Minima?</td>
      <td>Dolorum.</td>
      <td>Molestiae.</td>
    </tr>
    <tr>
      <td>Vero!</td>
      <td>Voluptatum?</td>
      <td>Ea?</td>
      <td>Odit!</td>
      <td>A.</td>
    </tr>
    <tr>
      <td>Debitis.</td>
      <td>Veniam.</td>
      <td>Fuga.</td>
      <td>Alias!</td>
      <td>Recusandae!</td>
    </tr>
    <tr>
      <td>Aperiam!</td>
      <td>Dolorum.</td>
      <td>Enim.</td>
      <td>Sapiente!</td>
      <td>Suscipit?</td>
    </tr>
    <tr>
      <td>Consequuntur.</td>
      <td>Doloremque.</td>
      <td>Illum!</td>
      <td>Iste!</td>
      <td>Sint!</td>
    </tr>
    <tr>
      <td>Facilis.</td>
      <td>Error.</td>
      <td>Fugiat.</td>
      <td>At.</td>
      <td>Modi?</td>
    </tr>
    <tr>
      <td>Voluptatibus!</td>
      <td>Alias.</td>
      <td>Eaque.</td>
      <td>Cum.</td>
      <td>Ducimus!</td>
    </tr>
    <tr>
      <td>Nihil.</td>
      <td>Enim.</td>
      <td>Earum?</td>
      <td>Nobis?</td>
      <td>Eveniet.</td>
    </tr>
    <tr>
      <td>Eum!</td>
      <td>Id?</td>
      <td>Molestiae.</td>
      <td>Velit.</td>
      <td>Minima.</td>
    </tr>
    <tr>
      <td>Sapiente?</td>
      <td>Neque.</td>
      <td>Obcaecati!</td>
      <td>Earum.</td>
      <td>Esse.</td>
    </tr>
    <tr>
      <td>Nam?</td>
      <td>Ipsam!</td>
      <td>Provident.</td>
      <td>Ullam.</td>
      <td>Quae?</td>
    </tr>
    <tr>
      <td>Amet!</td>
      <td>In.</td>
      <td>Officia!</td>
      <td>Natus?</td>
      <td>Tempore?</td>
    </tr>
    <tr>
      <td>Consequatur.</td>
      <td>Hic.</td>
      <td>Officia.</td>
      <td>Itaque?</td>
      <td>Quasi.</td>
    </tr>
    <tr>
      <td>Enim.</td>
      <td>Tenetur.</td>
      <td>Asperiores?</td>
      <td>Eos!</td>
      <td>Libero.</td>
    </tr>
    <tr>
      <td>Exercitationem.</td>
      <td>Quidem!</td>
      <td>Beatae?</td>
      <td>Adipisci?</td>
      <td>Accusamus.</td>
    </tr>
    <tr>
      <td>Omnis.</td>
      <td>Accusamus?</td>
      <td>Eius!</td>
      <td>Recusandae!</td>
      <td>Dolor.</td>
    </tr>
    <tr>
      <td>Magni.</td>
      <td>Temporibus!</td>
      <td>Odio!</td>
      <td>Odit!</td>
      <td>Voluptatum?</td>
    </tr>
    <tr>
      <td>Eum.</td>
      <td>Animi!</td>
      <td>Labore.</td>
      <td>Alias!</td>
      <td>Fuga.</td>
    </tr>
    <tr>
      <td>Quia!</td>
      <td>Quis.</td>
      <td>Neque?</td>
      <td>Illo.</td>
      <td>Ad.</td>
    </tr>
    <tr>
      <td>Officiis.</td>
      <td>Exercitationem!</td>
      <td>Adipisci?</td>
      <td>Officiis?</td>
      <td>In?</td>
    </tr>
    <tr>
      <td>Voluptates?</td>
      <td>Voluptatum.</td>
      <td>Nihil.</td>
      <td>Totam?</td>
      <td>Quisquam!</td>
    </tr>
    <tr>
      <td>Soluta.</td>
      <td>Tempore!</td>
      <td>Cupiditate.</td>
      <td>Beatae.</td>
      <td>Perspiciatis.</td>
    </tr>
    <tr>
      <td>Porro.</td>
      <td>Officia?</td>
      <td>Error.</td>
      <td>Culpa?</td>
      <td>Fugit.</td>
    </tr>
    <tr>
      <td>Et?</td>
      <td>Nemo.</td>
      <td>Nisi?</td>
      <td>Totam!</td>
      <td>Voluptate.</td>
    </tr>
    <tr>
      <td>Saepe?</td>
      <td>Vero.</td>
      <td>Amet?</td>
      <td>Illo!</td>
      <td>Laborum!</td>
    </tr>
    <tr class="purple">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
    <tr>
      <td>Atque!</td>
      <td>Tenetur.</td>
      <td>Optio.</td>
      <td>Iure.</td>
      <td>Porro.</td>
    </tr>
    <tr>
      <td>Atque.</td>
      <td>Alias.</td>
      <td>Doloremque.</td>
      <td>Velit.</td>
      <td>Culpa.</td>
    </tr>
    <tr>
      <td>Placeat?</td>
      <td>Necessitatibus.</td>
      <td>Voluptate!</td>
      <td>Possimus.</td>
      <td>Nam?</td>
    </tr>
    <tr>
      <td>Illum!</td>
      <td>Quae.</td>
      <td>Expedita!</td>
      <td>Omnis.</td>
      <td>Nam.</td>
    </tr>
    <tr>
      <td>Consequuntur!</td>
      <td>Consectetur!</td>
      <td>Provident!</td>
      <td>Consequuntur!</td>
      <td>Distinctio.</td>
    </tr>
    <tr>
      <td>Aperiam!</td>
      <td>Voluptatem.</td>
      <td>Cupiditate!</td>
      <td>Quae.</td>
      <td>Praesentium.</td>
    </tr>
    <tr>
      <td>Possimus?</td>
      <td>Qui.</td>
      <td>Consequuntur.</td>
      <td>Deleniti.</td>
      <td>Voluptas.</td>
    </tr>
    <tr>
      <td>Hic?</td>
      <td>Ab.</td>
      <td>Asperiores?</td>
      <td>Omnis.</td>
      <td>Animi!</td>
    </tr>
    <tr>
      <td>Cupiditate.</td>
      <td>Velit.</td>
      <td>Libero.</td>
      <td>Iste.</td>
      <td>Dicta?</td>
    </tr>
    <tr>
      <td>Consequatur!</td>
      <td>Nobis.</td>
      <td>Aperiam!</td>
      <td>Odio.</td>
      <td>Nemo!</td>
    </tr>
    <tr>
      <td>Dolorem.</td>
      <td>Distinctio?</td>
      <td>Provident?</td>
      <td>Nisi!</td>
      <td>Impedit?</td>
    </tr>
    <tr>
      <td>Accusantium?</td>
      <td>Ea.</td>
      <td>Doloribus.</td>
      <td>Nobis.</td>
      <td>Maxime?</td>
    </tr>
    <tr>
      <td>Molestiae.</td>
      <td>Rem?</td>
      <td>Enim!</td>
      <td>Maxime?</td>
      <td>Reiciendis!</td>
    </tr>
    <tr>
      <td>Commodi.</td>
      <td>At.</td>
      <td>Earum?</td>
      <td>Fugit.</td>
      <td>Maxime?</td>
    </tr>
    <tr>
      <td>Eligendi?</td>
      <td>Quis.</td>
      <td>Error?</td>
      <td>Atque.</td>
      <td>Perferendis.</td>
    </tr>
    <tr>
      <td>Quidem.</td>
      <td>Odit!</td>
      <td>Tempore.</td>
      <td>Voluptates.</td>
      <td>Facere!</td>
    </tr>
    <tr>
      <td>Repudiandae!</td>
      <td>Accusamus?</td>
      <td>Soluta.</td>
      <td>Incidunt.</td>
      <td>Aliquid?</td>
    </tr>
    <tr>
      <td>Quisquam?</td>
      <td>Eius.</td>
      <td>Obcaecati?</td>
      <td>Maxime.</td>
      <td>Nihil.</td>
    </tr>
    <tr>
      <td>Minus.</td>
      <td>Magni?</td>
      <td>Necessitatibus?</td>
      <td>Asperiores.</td>
      <td>Iure.</td>
    </tr>
    <tr>
      <td>Ipsa!</td>
      <td>Temporibus.</td>
      <td>Non!</td>
      <td>Dolore.</td>
      <td>Veritatis.</td>
    </tr>
    <tr>
      <td>Ea!</td>
      <td>Officia?</td>
      <td>Doloribus?</td>
      <td>Deleniti?</td>
      <td>Dolorem!</td>
    </tr>
    <tr>
      <td>Sequi?</td>
      <td>Molestias!</td>
      <td>Nesciunt.</td>
      <td>Qui.</td>
      <td>Doloribus?</td>
    </tr>
    <tr>
      <td>Id.</td>
      <td>Enim?</td>
      <td>Quam!</td>
      <td>Sunt!</td>
      <td>Consequuntur.</td>
    </tr>
    <tr>
      <td>Reprehenderit?</td>
      <td>Ut?</td>
      <td>Veritatis!</td>
      <td>Corporis!</td>
      <td>Ipsa.</td>
    </tr>
    <tr>
      <td>Blanditiis!</td>
      <td>Veniam!</td>
      <td>Tenetur.</td>
      <td>Eos?</td>
      <td>Repellat!</td>
    </tr>
    <tr>
      <td>Enim?</td>
      <td>Atque!</td>
      <td>Aspernatur?</td>
      <td>Fugit.</td>
      <td>Voluptatibus!</td>
    </tr>
    <tr>
      <td>Nihil.</td>
      <td>Distinctio!</td>
      <td>Aut!</td>
      <td>Rerum!</td>
      <td>Dolorem?</td>
    </tr>
    <tr>
      <td>Inventore!</td>
      <td>Hic.</td>
      <td>Explicabo.</td>
      <td>Sit.</td>
      <td>A.</td>
    </tr>
    <tr>
      <td>Inventore.</td>
      <td>A.</td>
      <td>Nam.</td>
      <td>Beatae.</td>
      <td>Consequatur.</td>
    </tr>
    <tr>
      <td>Eligendi.</td>
      <td>Illum.</td>
      <td>Enim?</td>
      <td>Dignissimos!</td>
      <td>Ducimus?</td>
    </tr>
    <tr>
      <td>Eligendi!</td>
      <td>Fugiat?</td>
      <td>Deleniti!</td>
      <td>Rerum?</td>
      <td>Delectus?</td>
    </tr>
    <tr>
      <td>Sit.</td>
      <td>Nam.</td>
      <td>Eveniet?</td>
      <td>Veritatis.</td>
      <td>Adipisci!</td>
    </tr>
    <tr>
      <td>Nostrum?</td>
      <td>Totam?</td>
      <td>Voluptates!</td>
      <td>Ab!</td>
      <td>Consequatur.</td>
    </tr>
    <tr>
      <td>Error!</td>
      <td>Dicta?</td>
      <td>Voluptatum?</td>
      <td>Corporis!</td>
      <td>Ea.</td>
    </tr>
    <tr>
      <td>Vel.</td>
      <td>Asperiores.</td>
      <td>Facere.</td>
      <td>Quae.</td>
      <td>Fugiat.</td>
    </tr>
    <tr>
      <td>Libero?</td>
      <td>Molestias.</td>
      <td>Praesentium!</td>
      <td>Accusantium!</td>
      <td>Tenetur.</td>
    </tr>
    <tr>
      <td>Eveniet.</td>
      <td>Quam.</td>
      <td>Quibusdam.</td>
      <td>Eaque?</td>
      <td>Dolore!</td>
    </tr>
    <tr>
      <td>Asperiores.</td>
      <td>Impedit.</td>
      <td>Ullam?</td>
      <td>Quod.</td>
      <td>Placeat.</td>
    </tr>
    <tr>
      <td>In?</td>
      <td>Aliquid.</td>
      <td>Voluptatum!</td>
      <td>Omnis?</td>
      <td>Magni.</td>
    </tr>
    <tr>
      <td>Autem.</td>
      <td>Earum!</td>
      <td>Debitis!</td>
      <td>Eius.</td>
      <td>Incidunt.</td>
    </tr>
    <tr>
      <td>Blanditiis?</td>
      <td>Impedit.</td>
      <td>Libero?</td>
      <td>Reiciendis!</td>
      <td>Tempore.</td>
    </tr>
    <tr>
      <td>Quasi.</td>
      <td>Reiciendis.</td>
      <td>Aut?</td>
      <td>Architecto?</td>
      <td>Vero!</td>
    </tr>
    <tr>
      <td>Fuga!</td>
      <td>Illum!</td>
      <td>Tenetur!</td>
      <td>Vitae.</td>
      <td>Natus.</td>
    </tr>
    <tr>
      <td>Dolorem?</td>
      <td>Eaque!</td>
      <td>Vero?</td>
      <td>Quibusdam.</td>
      <td>Deleniti?</td>
    </tr>
    <tr>
      <td>Minus.</td>
      <td>Accusantium?</td>
      <td>Ab.</td>
      <td>Cupiditate.</td>
      <td>Atque?</td>
    </tr>
    <tr>
      <td>Hic.</td>
      <td>Eligendi.</td>
      <td>Sit?</td>
      <td>Nihil.</td>
      <td>Dolor.</td>
    </tr>
    <tr>
      <td>Quidem.</td>
      <td>In?</td>
      <td>Nesciunt?</td>
      <td>Adipisci.</td>
      <td>Neque.</td>
    </tr>
    <tr>
      <td>Eos.</td>
      <td>Incidunt!</td>
      <td>Quis?</td>
      <td>Quod?</td>
      <td>Vitae!</td>
    </tr>
    <tr>
      <td>Ullam!</td>
      <td>Facilis.</td>
      <td>Tempora!</td>
      <td>Accusantium.</td>
      <td>Consequuntur?</td>
    </tr>
    <tr>
      <td>Numquam?</td>
      <td>At.</td>
      <td>Incidunt.</td>
      <td>Tenetur?</td>
      <td>Voluptatem.</td>
    </tr>
    <tr>
      <td>Iusto?</td>
      <td>Inventore.</td>
      <td>Molestias.</td>
      <td>Accusantium.</td>
      <td>Sunt.</td>
    </tr>
    <tr>
      <td>Repellendus!</td>
      <td>Ex.</td>
      <td>Magnam.</td>
      <td>Odit!</td>
      <td>Iste?</td>
    </tr>
    <tr>
      <td>Id!</td>
      <td>Reiciendis?</td>
      <td>Rem.</td>
      <td>Quae!</td>
      <td>Laborum?</td>
    </tr>
    <tr>
      <td>Exercitationem?</td>
      <td>Maiores.</td>
      <td>Minima.</td>
      <td>Nemo!</td>
      <td>Sequi.</td>
    </tr>
    <tr>
      <td>Qui.</td>
      <td>Impedit?</td>
      <td>Reprehenderit.</td>
      <td>Distinctio.</td>
      <td>Natus?</td>
    </tr>
    <tr>
      <td>Suscipit!</td>
      <td>Tenetur.</td>
      <td>Cumque!</td>
      <td>Molestiae.</td>
      <td>Fugiat?</td>
    </tr>
    <tr>
      <td>Sunt?</td>
      <td>Quis?</td>
      <td>Officia.</td>
      <td>Incidunt.</td>
      <td>Voluptate.</td>
    </tr>
    <tr>
      <td>Possimus.</td>
      <td>Mollitia!</td>
      <td>Eveniet!</td>
      <td>Temporibus.</td>
      <td>Mollitia!</td>
    </tr>
    <tr>
      <td>Incidunt.</td>
      <td>Fugiat.</td>
      <td>Error.</td>
      <td>Odit.</td>
      <td>Cumque?</td>
    </tr>
    <tr>
      <td>Maxime?</td>
      <td>Qui!</td>
      <td>Sapiente!</td>
      <td>Natus.</td>
      <td>Soluta?</td>
    </tr>
    </tbody>
  </table>
</div>
</body>
</html>






二.sticky使用过程中的坑






2.1 只在 Containing Block 内有效

用一个 div 把 div.sticky 包裹起来,发现 Sticky 效果失效了!!!
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

根据文档,Sticky 效果只在Containing Block内有效,Containing Block 滑出屏幕时,Stickey Element 也跟着滑走。

修改外层div的高度,sticky效果又回来了。

在这里插入图片描述

在这里插入图片描述






2.2 Overflow对Sticky的影响



overflow属性参考资料:菜鸟教程
在这里插入图片描述




给包裹了sticky部分的div加上 overflow: auto属性,发现sticky失效(overflow 设置为其他非 visible 的有效值也是同样效果)

在这里插入图片描述
在这里插入图片描述




根据参考资料③中博主的表述,其得出的结论如下:

Sticky Element 的 offset 值是依据 nearest scrolling ancestor (距离最近的滚动祖先) 计算的,如果没有匹配上的祖先元素,则使用视口作为参照物。

问题就出在 overflow-x 或者 overflow-y 其中任一为非 visible 则认为是要找的目标元素,而在滚动窗口的过程中,Sticky Element 和 它找到的目标祖先元素的 offset 值一直没有改变,所以 Sticky 不起作用。

对症下药,让滚动发生在被“误匹配”上的祖先元素内即可恢复 Sticky Effect

/**原来的代码**/
#root {
  overflow: auto; 

}

/**改进后的代码**/
#root {
  overflow: auto; 
  height: 100vh;
}






我本人认为,当使用sticky这一position定位时,应该必须注意好是否有必要设置overflow这一属性,最好的使用方法还是将需要sticky的部分把控在一个特定的div内,尽可能避免复杂情况的发生。

例如如下代码中,sticky部分只会在特定的div内起作用,而不会影响到下一个div,而且这样逻辑清晰,不易出错,方便维护。
在这里插入图片描述






2.3.兼容问题

sticky这一属性值在2017年才推出,IE, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix。而使用移动端基本不会有问题。






三.应用场景






3.1 表格的查看

在网页中查看表格首行和首列固定不动,这是一种很常见的应用场景。
在这里插入图片描述





主要代码思路如下

.table-container {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* 首列固定 */
.table-container thead tr > th:first-child,
.table-container tbody tr > td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* 表头固定 */
.table-container thead tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 表头首列强制最顶层 */
.table-container thead tr > th:first-child {
  z-index: 3;
}






3.2 导航栏、栏目条等吸顶效果

在这里插入图片描述
在这里插入图片描述






四、参考资料

①菜鸟教程 https://www.runoob.com/css/css-positioning.html
②sticky其实很简单 http://www.mamicode.com/info-detail-2775061.html
③CSS 定位详解 阮一峰 http://www.ruanyifeng.com/blog/2019/11/css-position.html
④纯CSS实现Table固定表头和首列 https://www.tangshuang.net/7739.html

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐