sticky elements

Assume you have an HTML page with sticky/fixed non-scrolling header on top.

Then how should I solve the issue of the header overlapping a targeted element with an anchor (#element-id) i.e. make the browser scroll to the element but still respect the height of the fixed header as not to overlap the element?