Fixní menu při rolování

Obdobnou technikou jako u fixního postranního panelu lze zajistit i u vodorovného menu, aby se při odrolování o více než je jeho umístění odshora přilepilo k horní straně okna a tam zůstalo.

Zafixování se provede až přes CSS třídu, kterou nastaví JavaScript v momentě, kdy je vzdálenost navigace shora menší než hodnota, o kterou je už odrolováno.

Díky nastavování třídy místo element.style.position = "fixed" je pohodlnější upravování dalších stylů — při zafixování může být vhodné například menu zjednodušit nebo zmenšit.

Vycentrování menu

Trochu nešikovné je, že se fixní posice musí dopočítat od okrajů celého okna (ne od nadřazeného elementu s position: relative jako u absolutního posicování).

1. První možnost je centrovat nastavením left: 50%, přesné šířky a záporného marginu o polovině šířky.
2. Kromě toho je možné vytvořit fixní element se 100% šířkou, naposicovat ho do levého horního rohu (left: 0; top: 0) a až v rámci tohoto obalu centrovat navigaci. Potom není problém použít centrování přes margin: auto nebo text-align: center pro inline/inline-block elementy.

Fixní menu

Pokud navigace bude úplně nahoře (nebo tam, kde může být i při rolování – třeba vedle obsahu) už při načtení stránky, stačí samotné position: fixed bez JavaScriptové šaškárny.

A ještě…

… trochu vycpávky, aby se zafixování mohlo projevit.

Další hotová řešení

• StickUp (kromě fixování i zvýrazňuje aktivní položku)
• Headroom.js