为何跟随
免去回到顶部的成本（Pirolli & Card, 1999）。应小巧、高对比（Laubheimer, 2021），应用可随滚动缩小（Google, n.d.）。
小屏成本
可见内容少（Kim et al., 2015），顶部离拇指远（Fitts, 1954）。下滑隐藏、上滑显示，常用功能放底部导航。
遮挡与无障碍
position: sticky（MDN, n.d.）；用scroll-padding-top防遮挡；遵循WCAG 2.2的2.4.11与1.4.10，并考虑安全区域。
常见问题
- 总是好吗？
- 长页面有用，短页面宜缩小。
- sticky与fixed区别？
- sticky到阈值才固定，fixed一开始就固定。
来源核查日期：2026-10-27
参考文献
- Laubheimer, P. (2021, April 4). Sticky headers: 5 ways to make them better. Nielsen Norman Group. 改进固定标题栏的五种方法。
- Google. (n.d.). Top app bar. Material Design 3. 顶部应用栏滚动行为。
- MDN Web Docs. (n.d.). position. Mozilla. sticky与fixed的区别。
- Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. 小屏可见内容少。
- Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. 降低导航成本。
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 顶部按钮离拇指远。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 2.4.11与1.4.10标准。