CSS 定位 sticky 元素的当前“固定”状态

在本文中，我们将介绍如何使用CSS定位(sticky)来选择当前处于“固定”状态的元素，并为您提供丰富的示例说明。

阅读更多：CSS 教程

理解 sticky 定位

在CSS中，sticky定位是一种特殊类型的定位，它可以使元素始终保持在其父容器的可视区域内，但当页面滚动到一定位置时，元素将变为固定定位，并在页面上停留。

在许多情况下，我们希望在元素处于“固定”状态时对其进行特殊样式处理或添加特定的交互行为。下面是一些示例场景：

1. 为固定的导航条添加样式

假设我们有一个固定在页面顶部的导航条，当用户滚动页面时，我们希望导航条改变其样式以更好地呼应页面滚动行为。

nav {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 100;
}

nav.stuck {
  background-color: #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #fff;
}

在上述示例中，我们使用position: sticky将导航条设置为粘性定位。然后，我们为处于“固定”状态的导航条添加了一个新的CSS类.stuck，并在该类中定义了新的样式。

为了让导航条根据“固定”状态添加或移除.stuck类，我们需要使用JavaScript来追踪滚动事件，并根据元素的位置或其他条件来切换类名。

2. 通过特定图标标识固定广告

考虑一个常见情况，即在页面上有一个固定的广告元素，在用户滚动到页面某个位置时，该广告将变为固定，同时我们还希望通过添加一个特定图标来引起用户的注意。

.ad {
  position: sticky;
  top: 20px;
}

.ad.stuck::before {
  content: "广告";
  font-family: FontAwesome;
  font-weight: bold;
  color: #ff0000;
  position: absolute;
  left: -30px;
  top: -5px;
}

上面的示例中，我们使用::before伪元素在固定广告元素的左上角添加了一个红色图标（来自FontAwesome字体库）。该图标只有在广告元素处于“固定”状态时才可见。