position:sticky粘性定位

在浏览网站时，通常会看到HTML元素（如横幅和导航）滚动到一定位置时就固定在浏览器的顶部。之前我们一直采用JavaScript滚动事件来监听滚动到一定位置时给此元素添加position: fixed固定定位。你是知道的固定定位是脱离文档流的哟，因此事先在HTML结构上，不要忘了给这个元素添加一个父元素写上高度占位，不然滚动到一定位置时就会出现页面抖动。如果不写高度占位，你可以尝试CSS Scroll Snap实现滚动捕捉及填充滚动容器空白区域方案。

position:sticky;

MDN很好地解释道：

粘性定位是相对和固定定位的混合体。该元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定位置。

注意：混合体，混合体，混合体哟，我还是担心抖动的问题，自己试一把吧

<div style="background:#f60;height:80px"></div>
<div style="height:60px;background-color:#666;position:sticky;top:-1px;">position: sticky标题</div>
<div style="background-color:#000;height:1000px;color:#fff">检查文字是否像position:fixed一样有抖动</div>

漂亮，确实是相对和固定定位的混合体。position:sticky还可以实现图片堆叠效果。

实例之表格标题行固定

html结构：

<div class="table-wrapper">
  <table>
  <thead>
    <tr>
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
      <th>J</th>
      <th>K</th>
      <th>L</th>
      <th>M</th>
      <th>N</th>
      <th>O</th>
      <th>P</th>
      <th>Q</th>
      <th>R</th>
      <th>S</th>
      <th>T</th>
      <th>U</th>
      <th>V</th>
      <th>W</th>
      <th>X</th>
      <th>Y</th>
      <th>Z</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>James</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
   .....
  </tbody>
</table>
</div>

css表现：

html,body {
  margin: 20px;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 90%;
  color: #333;
  justify-content: center;
}

.table-wrapper {
  max-width: 700px;
  overflow: scroll;
}

table {
  position: relative;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

td, th {
  white-space: nowrap;
  border: 1px solid #ddd;
  padding: 20px;
  text-align: center;
}

th {
  background-color: #eee;
  position: sticky;
  top: -1px;
  z-index: 2;
  
  &:first-of-type {
    left: 0;
    z-index: 3;
  }
}

tbody tr td:first-of-type {
  background-color: #eee;
  position: sticky;
  left: -1px;
  text-align: left;
}

总结

• 移动端用用挺好啊
• position:sticky同时top: -1px很重要的，不然好像不起作用，你可以试试