CSS position:sticky和position:fixed有何区别

CSS中的position属性可以让开发者控制元素在文档中的布局方式。其中，position: sticky和position: fixed是两种常见的定位方式，它们看起来很相似，但在细节上有所不同。在本文中，我们将比较这两者之间的差异并举例说明。

定义

在介绍它们的差异之前，让我们先看看它们的定义。

position: fixed

position: fixed定义让元素始终固定在屏幕中的某个位置，与文档的其余内容无关。

.example{
  position: fixed;
  top: 0;
  left: 0;
}

上述代码会将.example元素放置在页面左上角，当页面滚动时，它仍会保持在这个位置不动。这种行为常常用于创建导航栏或其他永久显示的元素。

position: sticky

position: sticky定义了元素粘贴在文档中的某个位置，也就是说，元素会一直粘在最近的滚动容器（父元素）上，直到滚动容器滚动到边界时，元素会变成position:fixed的表现样式。

.example{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

上述代码会将.example元素置于页面的顶部，并保留在其祖先滚动容器中。在滚动容器（父元素）滚动时，.example元素会跟着滚动，并粘着在顶部，直到滚动到它的容器底部。

差异

position: sticky与position: fixed之间的区别可能很细微，但是在某些情况下，他们的差异可能会成为设计和性能选择的关键因素。

布局

当您使用position: fixed时，您不需要考虑周围元素的影响，因为它会始终保持在屏幕的同一位置。与此相反，当您使用position: sticky时，您需要考虑固定元素周围的其他元素。由于元素保持在其原始文档位置的影响，因此文档中的布局可能会受到影响。

性能

由于使用position: fixed可以减少复杂的DOM操作并提高性能，因此在某些情况下，使用该方法可以更好地支持低功率设备。在大多数情况下，使用position: sticky不会影响性能，但在某些情况下，它可能稍慢。

兼容性

position: sticky更常常用于新项目中。它在大多数现代浏览器中都有良好的支持： Chrome, Firefox, Internet Explorer, Edge。

position: fixed被广泛用于旧网站中，它在大多数浏览器中都有良好的支持，例如：Chrome, Firefox, Internet Explorer，Edge，但对于 Opera Mini 等非常古老的浏览器，则不支持 position: fixed 样式表达式。

何时使用

在决定何时使用position: sticky或position: fixed时，有几个因素需要考虑。如果您需要元素在屏幕上总是可见，则应使用position: fixed。如果您需要元素在其滚动容器中始终可见，则应使用position: sticky。

但是，如果您在使用position: sticky时发现布局出现问题，则必须在该元素及其周围的其他元素之间进行优化。此外，如果您在性能方面有考虑，则可能需要考虑使用position: fixed。

示例

下面是一个简单的示例，position: sticky是在以下情况下使用的合适的方案：需要元素在其滚动容器内始终可见。

<div class="parent">
  <div class="example">
    <p>这是一个示例的段落文本</p>
  </div>
  <div class="rest-of-the-content">
    <p>这是网页的其余部分</p>
  </div>
</div>

.parent{
  height: 300px;
  overflow-y: scroll;
}
.example{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: white;
}

以上代码将.example元素固定在其父元素（.parent）的顶部位置，其他内容（.rest-of-the-content）可以自由地滚动。

以下示例是使用position: fixed的方案，在以下情况下适合使用：需要元素在屏幕上总是可见。

<div class="example">
  <p>这是一个示例的段落文本</p>
</div>

.example{
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
}

以上代码将.example元素固定在页面的左上角，并在屏幕的其余部分滚动时保持不变。

结论

position: sticky 和 position: fixed之间的区别是微妙的，因此根据设计需求就可以对其进行选择。除非您在性能方面受到限制，否则我们建议不断尝试便于不断优化布局。