聊聊CSS粘性定位sticky案例解析

聊聊CSS粘性定位sticky案例解析

什么是CSS粘性定位sticky

CSS粘性定位sticky是一种比较新的布局方式，它是相对定位和固定定位的结合，可以实现一些特殊的布局需求。粘性定位sticky的特点是在特定的条件下表现为固定定位，而在另一些条件下又表现为相对定位。

粘性定位的属性

粘性定位的属性只有一个，即position:sticky。这个属性值可以和top、bottom一起使用，表示元素在滚动到指定位置时，将“粘滞”在那个位置上。

实际应用

示例一：固定表头

在某些需要表格展示的页面上，往往会出现表头需要随着页面向下滚动而保持可见的需求。这个时候就可以使用粘性定位。

<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
        <th>表头4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
      </tr>
    </tbody>
  </table>
</div>

.table-wrap {
    height: 200px;
    overflow-y: auto;
}

th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #fff;
}

在这个示例中，我们给表头设置了position:sticky和top: 0。这样，当我们滚动到表格的顶端时，表头就会“粘滞”在视窗的顶部，不再随着表格向上滚动而消失。

示例二：顶部导航栏

在某些需要固定顶部导航栏的网站中，使用粘性定位也是一种比较方便的实现方式。

<nav class="nav-wrap">
  <ul>
    <li><a href="#">导航项1</a></li>
    <li><a href="#">导航项2</a></li>
    <li><a href="#">导航项3</a></li>
    <li><a href="#">导航项4</a></li>
    <li><a href="#">导航项5</a></li>
  </ul>
</nav>

.nav-wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #fff;
}

.nav-wrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

.nav-wrap ul li {
    margin: 0 20px;
    padding: 10px 0;
}

.nav-wrap ul li:first-child {
    margin-left: 0;
}

.nav-wrap ul li:last-child {
    margin-right: 0;
}

在这个示例中，我们给导航栏的容器设置了position:sticky和top:0。这样，当我们向下滚动页面时，导航栏就会“粘滞”在视窗的顶部，并且不会影响其他内容的展示。

注意事项

粘性定位的浏览器支持性还不是很完善，还需要加上浏览器兼容前缀-webkit-的声明，尤其是移动端的浏览器在支持上还有比较大的差异。并且需要注意的是，粘性定位属性只能应用在相对定位的元素上，即需要先给元素设置一个position:relative属性。