“the header that stays while the panel scrolls”「面板滚动时一直不动的头部」
“the bar pinned to the top of the screen”「钉在屏幕顶上的那条栏」
“the element that starts scrolling then gets stuck”「先跟着滚、滚到位就粘住的元素」
“keep this visible while scrolling”「滚动时一直让这个可见」
“the floating button fixed in the corner”「固定在角落的悬浮按钮」
Scrollable pane
Component notes
position: sticky
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
1Sticky threshold吸顶阈值top
“The point where the header stops scrolling and sticks” is the sticky threshold.
「头部停止滚动、粘住不动的那个点」就是吸顶阈值。
Prompt fragmentPrompt 片段
the CSS top inset defining the threshold where a position: sticky element becomes pinned
CSS top 偏移值，定义 position: sticky 元素开始钉住的阈值
2Sticky scroll container吸顶滚动容器position: sticky
“The panel the sticky header is trapped inside” is its scroll container.
「把吸顶头部困在里面的那个面板」就是它的滚动容器。
Prompt fragmentPrompt 片段
the nearest scrolling container that bounds the position: sticky element's travel
最近的滚动容器，限定 position: sticky 元素的活动范围
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Use position: sticky with top: 0 for the section header so it scrolls normally until it reaches the top of its nearest scrolling container, then remains there. Reserve position: fixed for UI that must stay anchored to the viewport independently of every scroll container.
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my sticky/fixed positioning. Rule out: sticky doing nothing because an ancestor has overflow hidden/auto/scroll — that is the classic; sticky missing a top/bottom offset so it never engages; fixed behaving like absolute inside a transformed/filtered ancestor; the content jumping when an element switches to fixed because no placeholder reserves its height. The symptom:
# Sticky vs. Fixed Positioning · 粘性定位 Sticky vs. 固定定位 Fixed
UI reference — https://K3tty5555.github.io/LearnUI_PM/web/sticky-fixed/
**Two ways to keep an element visible with different containing blocks**
两种让元素保持可见的定位方式，包含块各不相同
**Also called / 也叫:** sticky header, fixed header, pinned element / 吸顶头部、固定头部、钉住的元素
## Anatomy — every part, named / 解剖
1. **Sticky threshold · 吸顶阈值** (`top`)
“The point where the header stops scrolling and sticks” is the sticky threshold.
「头部停止滚动、粘住不动的那个点」就是吸顶阈值。
Prompt fragment: the CSS top inset defining the threshold where a position: sticky element becomes pinned
2. **Sticky scroll container · 吸顶滚动容器** (`position: sticky`)
“The panel the sticky header is trapped inside” is its scroll container.
「把吸顶头部困在里面的那个面板」就是它的滚动容器。
Prompt fragment: the nearest scrolling container that bounds the position: sticky element's travel
## Prompt / 提示词
Use position: sticky with top: 0 for the section header so it scrolls normally until it reaches the top of its nearest scrolling container, then remains there. Reserve position: fixed for UI that must stay anchored to the viewport independently of every scroll container.
分区头部用 position: sticky 加 top: 0：它先正常滚动，到达最近滚动容器的顶部后就停在那里。position: fixed 只留给必须锚定在视口、不受任何滚动容器影响的 UI。
## Debug prompt / 调试提示词
Debug my sticky/fixed positioning. Rule out: sticky doing nothing because an ancestor has overflow hidden/auto/scroll — that is the classic; sticky missing a top/bottom offset so it never engages; fixed behaving like absolute inside a transformed/filtered ancestor; the content jumping when an element switches to fixed because no placeholder reserves its height. The symptom:
调试我的 sticky/fixed 定位。排查：sticky 完全无效，因为祖先有 overflow: hidden/auto/scroll——经典坑；sticky 没设 top/bottom 偏移，永远不会触发；fixed 在带 transform/filter 的祖先里表现得像 absolute；元素切到 fixed 时内容跳动，因为没有占位保留它的高度。症状：
## In code / 代码里叫什么
- **CSS** `position: sticky`
- **CSS** `position: fixed`
- **CSS** `top`
