搭骨架
粘性定位 vs 固定定位
Sticky vs Fixed
「滚到顶吸住」「一直钉在屏幕上」「吸顶栏」「悬浮按钮定位」「sticky 和 fixed 区别」
LIVE DEMO真实可交互，动手试试
Sticky 筛选栏
Fixed 按钮
- 英文名
- Sticky vs Fixed
- 别名 · 俗称
- 吸顶和固定跟着滚到顶再停一直贴屏幕上sticky / fixed
- Web 叫法
- position: sticky / fixed
- 大白话定义
- Sticky 是滚到某个位置后再吸住，Fixed 是从头到尾都钉在视口上。两者看起来都像“固定住了”，但触发时机完全不同。
- 部位拆解
- 滚动容器 Scroll ContainerSticky 只在自己的滚动上下文里生效
- 触发边界 Offset比如 top: 0，决定什么时候吸住
- 视口 ViewportFixed 直接相对视口定位
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
筛选栏用 sticky：滚到顶部后吸住；客服悬浮按钮用 fixed：始终固定在右下角，不跟内容一起走
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的 Sticky / Fixed。逐一排除：sticky 的父容器开了 overflow 导致根本不生效；元素没有设置 top 偏移；fixed 层级太低被内容盖住；把应该 sticky 的导航做成 fixed 后，页面内容被挡住。症状是：