Fixní hlavička překrývá obsah

Sticky/fixed hlavička překrývá obsah při použití kotev

Typický příklad hlavně u one-page webů – máte na webu sticky/fixed hlavičku, která je ukotvena/přilepená na stránce celou dobu, a při použití kotev mám překryje obsah. Většinou je to nastavení typu “Sticky on scroll” a podobně.

Pro takový problém je tu jednoduché řešení přes CSS.

CSS scroll-margin-top

scroll-margin-top je možné použít ve všech moderních prohlížečích a je jednoduché ho aplikovat – na všechny sekce (nebo konkrétní CSS třídu, podle vaší potřeby) nastavíte požadované odsazení:

section {
    scroll-margin-top: 80px; /* Header height */
}

Případně pro konkrétní třídu .my-class:

.my-class {
    scroll-margin-top: 80px; /* Header height */
}

Nebo pro všechny elementy, které mají přiřazené ID:

[id] {
    scroll-margin-top: 80px; /* Header height */
}

Padding + margin

Druhou variantou je takový old-school trik, který vám bude fungovat všude. Prostě využijete toho, že margin může být záporný. Pro všechny sekce to vypadá takto:

section::before {
    content: "";
    display: block;
    height: 80px; /* Header height */
    margin-top: -80px; /* Header height, but negative */
    visibility: hidden;
}

Případně pro konkrétní třídu .my-class:

.my-class::before {
    content: "";
    display: block;
    height: 80px; /* Header height */
    margin-top: -80px; /* Header height, but negative */
    visibility: hidden;
}