Anchor link with a fixed or sticky header

If you have an anchor link on a page with a fixed or sticky header, the element linked to will disappear behind the header. To fix this, you will have to add the property scroll-margin-top to the element which is supported on all major browsers.

Here is an example for a header with a height of 80 pixels:

h1, h2, h3, h4, h5, h6 {
    scroll-margin-top: 80px;
}

If you want to support older browsers, you would have to add an invisible element before the element.

:before {
    content: "";
    display: block;
    height: 80px;
    margin: -80px 0 0;
}