O webu
Odkaz na kotvu a fixní menu

Problém je v tom, že prohlížeč odroluje přesně na kotvu a její cíl (třeba nadpis) je tím pádem skryt pod fixním prvkem. Živá ukázka problému.

Fixní hlavička překrývá cíl kotvy

Řešení

  1. Přidat nadpisu, který má kotvu, vrchní padding ve výšce fixního prvku a elementu před stejný rozměr odečíst záporným margin-bottom (ukázka).

  2. Do nadpisu umístit další element, který bude mít ID místo nadpisu. Tento element se relativně posune o výšku fixní navigace nahoru (ukázka).

    Pravděpodobně není možné použít ::before.

  3. Posun zajistit JavaScriptem.

JavaScriptové odsunutí

Vyřešit překrývání fixní navigací může být rozumné i JavaScriptem — první ani druhé CSS řešení není úplně ideální:

  • Pravděpodobně bude nutné mít specifický HTML kód (generovat kotvy jako prázdné <span>y v druhém případě a mít čemu dát záporný margin-bottom v případě prvním).
  • Spoléhá se na konkrétní výšku, což většinou nevěstí nic odbrého. Stačí když se menu roztáhne na dva řádky a přestane to fungovat.

Co tedy udělá JS? Po kliknutí na odkaz spočítá výšku fixního menu (offsetHeight) a o tuto výšku odroluje.

Živá ukázka

function kotva(kotva) {
  location.hash = kotva.hash;
  var top = document.documentElement.scrollTop || document.body.scrollTop;
  top = top - document.getElementById("menu").offsetHeight;
  document.body.scrollTop = document.documentElement.scrollTop = top;  
  return false;
}