Odkaz na kotvu a fixní hlavička

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.

Ř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;
}