Jak sticky prvky neblokují důležitý obsah

Nejčastější chyba: fixní menu přikryje nadpis nebo důležitý formulář. Návod, jak se tomu vyhnout a proč to záleží.

6 min čtení Začátečník Březen 2026

Stránka webu s viditelným obsahem pod navigační lištou bez překrytí

Autor

Tomáš Volárik

Senior Frontend Architect

Frontend architect s 14 lety zkušeností v designu responzivních navigačních systémů pro české firmy a globální projekty.

Proč se sticky navigace překrývá s obsahem?

Když navrhujete fixní menu, snadno se stane, že se obsah pod ním skrývá. Není to vada designu — je to fyzika webu. Sticky prvky se vynímají z normálního toku dokumentu a leží nad zbytkem stránky.

Představte si to tak: máte list papíru a na něj si nalepíte lístek s textem. Ten lístek teď zakrývá část papíru pod ním. Není to špatně — prostě je tam. Jenže na webu to vede k problému, když se uživatel dostane na konkrétní obsah. Skončí pod tím lístkem.

Nejhorší případ? Fixní menu skryje h1 nadpis, když se stránka načte. Nebo zakryje tlačítko ve formuláři. Nebo důležitý obsah, který uživatel právě hledá.

Diagram zobrazující fixní navigaci a obsah pod ní bez překrytí

Klíč k řešení: scroll-margin-top

CSS vlastnost scroll-margin-top řeší přesně tenhle problém. Řeknete prvku: “Když se uživatel na tebe proklikne, začni o tolik pixelů níž, aby se nekrepal pod fixní menu.”

Kód CSS s vlastností scroll-margin-top na monitoru

Jak to funguje v praxi

Řekněme, že máte fixní header vysoký 80 pixelů. Když uživatel klikne na odkaz na h2 nadpis, měl by se tento nadpis posunout o těch 80 pixelů níž, aby nebyl pod headerem.

Přidáte jednoduše CSS:

h2 { scroll-margin-top: 100px; }

Pozor na rezervu — použijte 100px místo přesných 80px. Chceme, aby obsah měl trochu vzdušnosti, ne aby těsně ční pod headerem.

Poznámka: Tenhle návod je pro vzdělávací účely. Každý web je jiný a potřebuje přizpůsobení. Některé staré prohlížeče scroll-margin-top neznají — vždy testujte na svém cílovém publiku.

Další techniky, které pomáhají

Scroll-margin-top není jediný způsob. Existují dalších několik přístupů, které se osvědčily u velkých českých webů.

Anchor padding (starší metoda)

Přidáte neviditelný padding-top na prvek s id. Funguje všude, ale je to hacknutí.

JavaScript scroll event

Posloucháte kliknutí a ručně scrollujete na správné místo. Funguje, ale je to složité a pomalejší.

Position: sticky místo fixed

Sticky se chová jinak — prvek “leží” v normálním toku, jen se přilepí. Někdy stačí změnit fixed na sticky.

Porovnání různých CSS technik na třech monitorech

Mobilní telefon zobrazující web bez překrytého obsahu

Zvlášť důležité na mobilu

Na malých obrazovkách je to ještě kritičtější. Pokud máte hamburger menu vysoké 56 pixelů a pod ním obsah, musíte použít scroll-margin-top: 60px či více.

Reálný případ: máte formulář na mobilní stránce. Uživatel klikne na “Jméno” a chcete, aby se input field zobrazil hned pod headerem, ne aby byl skrytý. To se řeší tím, co jsme probírali.

Věřte nám — bez toho to vypadá jako chyba v designu, i když je to jen technický detail.

Kontrolní seznam pro váš web

Změřit výšku fixního headeru nebo navigace (v pixelech)

Přidat 10-20 pixelů na rezervu (aby obsah nebyl těsně pod headerem)

Aplikovat


                  scroll-margin-top

na všechny h1, h2, h3 a další klíčové prvky

Testovat na mobilu, tabletu i desktopu

Zkontrolovat formuláře a input fieldy — mají také scroll-margin-top?

Vyzkoušet procházení odkazů — obsah se nikdy neskrývá pod headerem?

Shrnutí

Sticky prvky nejsou problém samy o sobě. Jsou skvělá věc — ušetří vám место na obrazovce a uživatelé mají vždy navigaci po ruce. Ale musíte myslet na to, co leží pod nimi.

Scroll-margin-top je jednoduchý, elegantní způsob, jak to vyřešit. Jedna řádka CSS a problém zmizí. Není to nový trik — je to standardní CSS, který funguje ve všech moderních prohlížečích.

Vaši uživatelé si to nebudou všímat — to je to nejlepší na tom. Budou jen cítit, že web funguje správně.