Sticky header nebo sticky menu má obvykle nastavený z-index tak, aby se zobrazoval vždy nahoře. To znamená, že překrývá veškerý obsah stránky od horního okraje okna až do vzdálenosti své výšky. Velikost viewportu, tedy okna, kde se stránka zobrazuje, se ale tímto nemění. Sticky header je “vytržený” z běžného toku dokumentu, takže obsah stránky se zobrazuje normálně od horního okraje okna. To znamená, že část pod headerem není vidět. Pro prohlížeč je tento obsah ale stále ve viewportu a tedy viditelný, nepozná, že ho překrývá jiný element.
Obvykle se to řeší odsazením obsahu stránky, např. padding-top: 100px při výšce headeru 100px. Pokud ale používáme kotvy (anchor), je třeba tuto situaci ošetřit, protože po kliknutí na odkaz s kotvou se stránka naroluje na příslušnou kotvu, která ale bude skrytá pod headerem, protože se zobrazí u horního okraje viewportu/okna. My máme ale od horního okraje okna sticky header, takže začátek obsahu kapitoly je schován pod ním.
V Elementoru stačí přidat tento kód do souboru styles.css ve vaší šabloně:
body:not(.elementor-editor-active) .elementor-widget-menu-anchor {
position: relative;
z-index: -1;
}
body:not(.elementor-editor-active) .elementor-menu-anchor:before {
content: "";
display: block;
height: 100px; // výška headeru
margin: -100px 0 0; // záporná výška headeru
visibility: hidden;
pointer-events: none;
}
Přičemž 100px resp. -100px určuje výšku našeho headeru. Přesněji řečeno určuje offset, o který se začátek kapitoly posune od horního okraje okna.
TIP: Sticky menu může být někdy otravné, na menších zařízeních navíc zabírá vzácné místo na displeji. Proto se často používá metoda, kdy při rolování dolů sticky menu po chvíli zmizí a objeví se, jakmile návštěvník začne rolovat nahoru. je totiž nasnadě, že pokud začne návštěvník rolovat vzhůru chce se pravděpodobně dostat k menu, a proto mu ho hned zobrazíme. Jak na to, zjistíte v tomto článku.