CSS中的sticky、fixed定位属性|极客教程

CSS中的sticky、fixed定位属性

在网页开发中，我们经常会遇到需要固定元素位置的情况。CSS中有两种常用的定位属性，即sticky和fixed，它们可以帮助我们实现元素的固定定位效果。本文将详细解释sticky和fixed的区别以及如何正确使用它们。

1. fixed定位

fixed定位是指元素相对于浏览器窗口固定位置的属性。无论用户如何滚动页面，该元素始终会留在指定的位置。通常情况下，fixed定位是通过设置position: fixed来实现的。

1.1 使用方法

.fixed-element {
  position: fixed;
  top: 10px; /* 以浏览器窗口顶部为参考，距离顶部10px */
  left: 50%; /* 以浏览器窗口左侧为参考，距离左侧50%的位置 */
  transform: translateX(-50%); /* 使元素水平居中 */
}

1.2 适用场景

导航栏固定在页面顶部
返回顶部按钮固定在页面右下角
侧边栏固定在页面某一位置

1.3 注意事项

因为fixed定位相对于浏览器窗口，所以在使用fixed定位时，要确保元素在各种屏幕尺寸下都能正确显示。
当fixed元素过多时，容易造成页面卡顿和占用过多空间，需要慎重使用。

2. sticky定位

sticky定位是相对定位和固定定位的结合体。元素在距离特定容器（指定了position: sticky）一定距离时才固定。与fixed不同的是，当页面滚动到指定位置时，元素会固定在容器位置。通常情况下，sticky定位是通过设置position: sticky来实现的。

2.1 使用方法

.sticky-element {
  position: -webkit-sticky; /* 兼容性写法 */
  position: sticky;
  top: 10px; /* 距离指定容器顶部10px */
}

2.2 适用场景

列表页中的筛选栏固定在页面顶部
表格中的表头随用户滚动而固定在页面顶部
页面中的标题导航在滚动到一定位置后固定在顶部

2.3 注意事项

使用sticky定位时，要确保设置了top、bottom、left、right等值，否则元素不会正常固定。
对于一些需要兼容性考虑的场景，可以通过-webkit-sticky来增强兼容性。

3. 两者区别

fixed定位是相对于浏览器窗口固定位置，不随页面滚动而改变，适用于需要一直显示在屏幕特定位置的元素。
sticky定位是相对于特定容器固定位置，随着页面滚动而改变，适用于需要在页面滚动到某一位置后才固定的元素。

4. 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky vs. Fixed</title>
<style>
  .container {
    height: 1500px;
  }

  .sticky-container {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    background-color: lightblue;
    padding: 10px;
  }

  .fixed-element {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: lightcoral;
    padding: 10px;
  }
</style>
</head>
<body>
<div class="container">
  <div class="sticky-container">
    <h3>This is a sticky element</h3>
  </div>

  <div class="fixed-element">
    <h3>This is a fixed element</h3>
  </div>
</div>
</body>
</html>