How to fix hash navigation with a sticky header

Problem statement: I have a sticky header and when I am clicking the table on the content link it’s scrolled to the top and hidden behind the sticky header.

Solution

use the scroll-margin-top CSS property on the section to scroll to the top with the given margin

scroll-margin-top: 20px;

The table of content contains headings that need to be set on the scroll-margin-top equal to the height of the header

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