Are sticky headers always good?

They help on long pages needing frequent returns to key features; hide or shrink them on short or reading-focused screens.

How do sticky and fixed differ?

Sticky stays in flow until a threshold; fixed is pinned from the start and removed from flow.

Sticky Header

⚙️ Engineering & Technology By CampusDown Wiki Editorial Team Last updated October 27, 2026

A sticky header is a top area that remains on screen as users scroll down, typically holding the logo, search and menu.

Contents

1. Why it follows
2. The cost on small screens
3. Covered content and accessibility
4. FAQ
5. References

Why it follows

Without it, users scroll back up for search or menus; a sticky header removes that cost, keeping the next path close (Pirolli & Card, 1999). Laubheimer (2021) says it should be small, high-contrast and unobtrusive. Apps often shrink it on scroll like Material's top app bar (Google, n.d.).

The cost on small screens

Small screens show less (Kim et al., 2015), and headers eat reading space, especially in landscape. Many sites hide headers on scroll down and reveal them on a slight scroll up. The top is also far from thumbs (Fitts, 1954), so frequent actions may belong in bottom navigation.

Covered content and accessibility

position: sticky (MDN, n.d.) is easy, but anchor links often land headings under the header; scroll-padding-top fixes it. WCAG 2.2 (W3C, 2023) 2.4.11 forbids obscured focus, and 1.4.10 means zoomed headers must not fill the screen. Add safe area padding on notched devices.

FAQ

Are sticky headers always good?: They help on long pages needing frequent returns to key features; hide or shrink them on short or reading-focused screens.
How do sticky and fixed differ?: Sticky stays in flow until a threshold; fixed is pinned from the start and removed from flow.

Sources reviewed: 2026-10-27

References

Laubheimer, P. (2021, April 4). Sticky headers: 5 ways to make them better. Nielsen Norman Group. Five ways to improve sticky headers.
Google. (n.d.). Top app bar. Material Design 3. Top app bar scroll behaviour.
MDN Web Docs. (n.d.). position. Mozilla. sticky versus 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. Small screens show less content.
Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. Lower navigation cost.
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. Top buttons are far from thumbs.
World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. Criteria 2.4.11 and 1.4.10.

Reports and materials that use this theory (Korean)

There are no materials dedicated to this theory yet, but you can search related reports in the CampusDown library (Korean).

Find more reports · Search '고정 헤더' on CampusDown →

Sticky Bottom ButtonA sticky bottom button stays fixed at the bottom of the screen while users scroll. Covers thumb-reach research, size and width, keyboard and safe areas, content obscuring, conversion experiments and WCAG criteria.💼 Business Bottom NavigationHow bottom navigation (tab bars) works and how to design it: thumb-reach research, the 3–5 destination rule, icons with labels, discoverability versus hidden menus, and common mistakes.⚙️ Engineering & Technology Safe Area InsetsSafe areas are the inner screen regions not covered by notches, rounded corners, home indicators or status bars. Covers why they matter, implementing them on iOS, Android edge-to-edge and CSS env(), landscape insets, and placing bottom buttons and tab bars.⚙️ Engineering & Technology AI Search Algorithms: A* and MinimaxAI search algorithms explained: state-space search, breadth-first and depth-first search, Dijkstra, heuristics and A* (admissibility, consistency), game trees, minimax and alpha-beta pruning, based on the original papers.⚙️ Engineering & Technology

Latest ArticlesView all ›

New guides for college study and assignments (Korean)

This article was last updated on October 27, 2026. It is based on widely recognized original works and textbooks; when citing it in a paper, please check the original sources listed in the references.