Fixní menu při scrollová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í

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Odkaz na kotvu a fixní menu

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Lightboxová vstupní stránka

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

Změna vzhledu stránky

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

Komentáře