Některé weby při odrolování zafixují navigaci k hornímu okraji. Docílit toho jde pomocí CSS position: fixed nebo position: sticky:

Zmenšení prostoru

Zásadní problém zafixované vodorovné navigace tkví v omezení dostupného prostoru pro obsah.

Mohlo by se zdát, že je to problém jen mobilních zařízení s malou obrazovkou, ale ani monitory a displeje desktopů nebo notebooků nemají výšku na rozdávání, protože je většina širokoúhlých.

Nejčastější rozlišení v roce 2025 jsou 1920 × 1080 (Full HD) a 2560 × 1440 (2K), ale stále významné procento uživatelů používá 1366 × 768 na noteboocích. Všechna tato rozlišení mají relativně malou výšku oproti šířce.

Navíc na desktopu ze svislého prostoru ubere místo:

• Hlavní systémová lišta (cca 40 px).
• Záhlaví prohlížeče (cca 60 px).
• Lišta záložek, kterou někdo používá (cca 30 px).
• Někteří uživatelé používají ještě další vlastní lišty nebo rozšíření.
• Na macOS může být ještě větší prostor zabrán systémovými prvky.

Nakonec tak zbude pro samotný obsah webu často jen něco přes 600 pixelů na výšku, což není mnoho.

Výška fixní hlavičky může mít třeba 50-80 pixelů (moderní navigace jsou často vyšší kvůli touch-friendly designu), což znamená, že bude neustále užírat 8-12 % dostupného místa.

Asi nejextrémnější situace nastává u mobilních telefonů při zobrazení webu na šířku. V tomto případě fixní hlavička zabere klidně 1/5 prostoru.

Moderní řešení

Dnešní webové aplikace často používají sofistikovanější přístupy než jednoduché fixní hlavičky:

• Sticky navigace – hlavička se zafixuje až po určité vzdálenosti od vrcholu
• Chytré zobrazování/skrývání – hlavička se skryje při scrollování dolů a zobrazí při scrollování nahoru
• Zjednodušená navigace – hlavička se zmenší nebo zjednoduší při scrollování
• Hamburger menu – navigace se skryje do ikony na mobilních zařízeních

Proč fixní

Při aplikaci zafixované hlavičky (nebo jiného fixního obsahu) je vhodné mít dobrý důvod, proč to udělat.

Dobrým důvodem není, že to vypadá cool a mají to na nějakém jiném webu.

Prostor, který je neustále viditelný a snižuje tak dostupné místo pro ostatní obsah, by měl obsahovat něco hodně důležitého. Je k úvaze, jestli je běžná navigace tak důležitá, aby se tím neustálý zábor místa ospravedlnil.

Další možný problém stále fixní navigace je odvádění pozornosti od obsahu.

Nabízí se také možnost odkazy na ostatní stránky přidávat přímo do obsahu, kde to dává smysl. Nebo mít na konci stránku zmíněné možnosti „Kam dál", odkaz pro návrat na hlavní stranu a podobně.

Hodit se může také drobečková navigace umístěná i pod obsahem na konci stránky.

Občas se používají plovoucí tlačítka pro návrat nahoru.

Kdy (ne)používat fixní hlavičku

Fixní hlavička tedy není vhodná pro všechny typy webů. Zde jsou orientační doporučení:

Vhodné pro fixní hlavičku

• E-commerce weby – košík a vyhledávání se hodí mít po ruce
• Aplikace s častou navigací – dashboardy, admin rozhraní, nástroje
• Weby s rychle se měnícím obsahem – novinky, sociální sítě

Nevhodné pro fixní hlavičku

• Čtenářské weby – blogy, články, dokumentace
• Prezentační stránky – landing pages, portfolia
• Weby s krátkým obsahem – kontaktní stránky, jednoduché prezentace
• Weby zaměřené na obsah – kde je důležitější čtení než navigace

Zobrazení při rolování vzhůru

Některé weby problém s místem a odváděním pozornosti fixního obsahu řeší jeho zobrazováním na základě směru rolování.

Pokud člověk po příchodu na stránku začne rolovat směrem dolů, hlavička neustále viditelná (fixní) nebude. Zobrazí se až při rolování směrem nahoru.

Vychází se z předpokladu, že pohybem vzhůru dává návštěvník najevo, že se chce dostat na hlavičku, která je nahoře.

Bohužel uživatel může mít tendenci vyjet vzhůru i v případě, že se chce jen dostat k obsahu, který přejel. V takovém případě ho zobrazení fixního obsahu nejspíš naštve, protože mu překryje obsah, ke kterému se chce dostat.

Tuto situaci jde částečně řešit tak, že se při rolování vzhůru (navíc třeba ještě s nějakou tolerancí) fixní prvek umístí nad horní hranu – tím nepřekryje obsah, ale bude nutné se k němu ještě déle prorolovat.

Krátké stránky

Zajímavý způsob, jak se nutnosti fixní navigace (nebo jiného obsahu) vyhnout, je vytvářet stránky dostatečně krátké na to, aby potom nebyl problém odrolovat na začátek.

Odkazy jinam

• Mobile Navigation Patterns
• Fixed Headers on Mobile: A/B Tested
• Fixed Positioning in Mobile Browsers