Offsetting Anchor Links with Fixed Header

You could include padding-top and then use negative margin-top to balance it out.

jsFiddle

h2 {
    padding-top: 70px;
    margin-top: -70px;
}

@Daniel Imms solution is good but if headers had top margin it would be reset by this negative top margin. I found a solution that uses pseudoclasses:

h2:before {
    display: block;
    content: " ";
    height: 20px;  /* Give height of your fixed element */
    margin-top: -20px; /* Give negative margin of your fixed element */
    visibility: hidden;
}

Thus this doesn't reset original top-margin.

Well. I had this issue as well. The best and fastest solution I could find here is to use the following code snippet in your Style tag or CSS file.

html
{
  scroll-padding-top: 12vw; /* height of sticky header */
}