什么是 CSS position: sticky？如何使用粘性定位

网页设计师使用层叠样式表（CSS）来控制网页的外观和行为。在 CSS 工具箱中，position: sticky 是一个极具实用价值的属性。粘性定位允许特定元素“固定”在视口内，而页面其余部分正常滚动。

您可以利用 position: sticky 确保导航栏、促销横幅及“添加到购物车”按钮等关键元素，在顾客浏览网站时始终保持可见。

以下将详细介绍 position: sticky 的定义、工作原理及其提升网站易用性的方法。

什么是 position: sticky？

Position: sticky 是一种 CSS 定位方式。当用户滚动页面时，它能使特定元素保持在屏幕可见区域，同时页面其他内容正常移动。

要使该属性生效，需满足两个条件：

• 元素必须包含在一个作为容器的父级页面元素（如标题或区块）内；
• 粘性元素仅在容器处于视口（用户可见区域）内时生效；一旦容器滚出视口，该元素也会随之消失。

若将 HTML 比作房屋的框架与墙壁，CSS 则负责油漆、家具和照明。Position: sticky 就像一种特殊工具，即使房间布局调整，也能将特定物品固定在原位。

粘性定位的典型应用场景包括：

• 导航栏：锁定标志、搜索栏和购物车图标于屏幕顶部，确保核心导航功能随时可访问。
• 促销横幅：全程保持销售截止日期、折扣代码等短期营销元素的可见性。
• 添加到购物车按钮：在长产品页或评论区滚动时始终显示，辅助顾客快速决策。
• 筛选和排序控件：无需返回顶部即可优化搜索结果，提升浏览效率。
• 订单摘要面板：通过粘性侧边栏实时展示商品名称、数量及总价，方便填写表单时核对订单。
• 尺寸及其他选择器：在阅读下方详情或评论时，保持颜色、尺寸选项可见。

CSS 有哪些不同的定位值？

自定义样式表中包含五种定位值，各有特定用途：

• 粘性定位（Sticky）
• 静态定位（Static）
• 相对定位（Relative）
• 绝对定位（Absolute）
• 固定定位（Fixed）

粘性定位

这是一种条件性定位。元素随页面正常滚动，直到达到设定阈值后固定不动；但仅当父容器可见时有效。一旦容器滚出屏幕，粘性元素也会离开。

静态定位

这是默认值。元素保留在文档流的原始位置，忽略任何位置指令。除非为了覆盖其他值，否则无需显式设置。

相对定位

元素保持在正常文档流中，但允许基于原始位置进行偏移。常用于作为子元素的定位锚点（如打折商品上的“促销”徽章），而非单纯的视觉移动。

绝对定位

元素完全脱离文档流，相对于最近的非静态父元素定位。适用于需要精确定位且不影响周围内容的覆盖层、徽章、工具提示和下拉菜单。

固定定位

与绝对定位类似，但锚定对象是视口而非父元素。最适合 Cookie 横幅、浮动聊天按钮等需在滚动时永久停留的全站元素。

Position: sticky 的工作原理

使用该属性需具备基础 CSS 和 HTML 知识。每个粘性元素必须位于可滚动的父容器内，并至少包含以下四个方向属性之一：

• Top（顶部）：最常用选项。向下滚动指定距离后，元素锁定于视口顶部。适用于导航栏、促销横幅或搜索过滤器。
• Bottom（底部）：元素正常滚动直至距视口底部指定距离处固定。常见于移动端持久的结账栏或“添加到购物车”按钮。
• Left（左侧）：水平滚动时粘附于容器左边缘。适用于产品比较表，冻结首列以便向右滚动时仍能看到行标签。
• Right（右侧）：水平滚动时锁定于容器右边缘。可用于冻结定价或规格表的汇总列。

使用时需指定触发粘性效果的阈值（即边缘距离）。也可组合方向属性，例如：

position: sticky;

top: 0;

left: 0;

此代码将使元素同时锁定顶部和左侧边缘，适用于双向滚动网格的角落元素。

注意：设置的值是触发粘性效果的距离，而非起始位置。元素会先正常移动，达到阈值后才固定。

如何使用 position: sticky

实现步骤如下：

1. 选择目标元素：确定需要设为粘性的按钮或横幅。

2. 设置方向及阈值：例如添加 top: 0;。

3. 检查父容器：容器内容高度必须超过视口高度，否则粘性效果无法激活。

4. 调整溢出设置：若父容器为 overflow: hidden，请改为 visible、auto 或 scroll。

5. 添加 z-index（可选）：确保重叠时粘性内容处于顶层。

粘性导航栏的 CSS 示例：

.nav-bar {

  position: sticky;

  top: 0;

  z-index: 100;

  background: white;

  border-bottom: 1px solid #eee;

}

虽然实现该功能需要一定的代码基础，但 Shopify 提供了简化流程的资源。您可以通过添加自定义 CSS 部署样式，或使用 Liquid 模板语言结合 HTML/CSS/JS 编辑主题代码，对在线商店进行深度定制。