Sticky header překrývá veškerý obsah stránky od horního okraje okna až vzdálenosti své výšky. Velikost viewportu se ale tímto nemění, takže obsah stránky schovaný pod sticky headerem je podle prohlížeče stále ve viewportu a viditelný.
To obvykle nevadí, ale pokud používáme na stránce kotvy pro jednotlivé kapitoly musíme učinit jistá opatření, aby vše fungovalo, jak má. Při kliknutí na odkaz na kotvu prohlížeč automaticky nascrolluje na příslušnou kotvu vobsahu. Nicméně zarovná ji k hornímu okraji okna. My ale máme 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 css šablony:
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; // fixed header height
margin: -100px 0 0; // negative fixed header height
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.