5 ms·
Sticky headers suffer from one glaring issue: If the page loads to an #anchor position, the sticky header covers up the anchor. Fix: window.onload = function
by hypertele-Xii 6y ago
Sticky headers suffer from one glaring issue: If the page loads to an #anchor position, the sticky header covers up the anchor. Fix:
window.onload = function()
{
var titlebarfixcoverfunction = function()
{
if (location.hash.indexOf('#') > -1)
{
var titlebar = document.getElementById('title');
window.scrollBy(0, -titlebar.offsetHeight);
}
};
titlebarfixcoverfunction();
window.addEventListener('hashchange', titlebarfixcoverfunction);
}
- oneplusone 6y agoOr just use the css property scroll-margin.
- city41 6y agoUnfortunately not supported by Safari.
- hypertele-Xii 6y agoThis only works with explicitly set heights. If you don't know the header's height, this won't work.
- lifthrasiir 6y agoYou don't even need JS to fix the target scroll: https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header/21707103 https://stackoverflow.com/questions/10732690/offsetting-an-h...
- Zardoz84 6y agoYeah, but have a little problem. What happen when the anchored item have visible text ?
- hypertele-Xii 6y agoThat only works when you set the height explicitly.