Невозможно перейти к правому элементу, используя <a href> because of fixed(frozen) page header pane

Question

I have page with a fixed header with absolute top value. So, as I scroll up the content in the body of the page srolls into the background of the header. So, when I click on an , the page scrolls to that element and by default places the element at the top of the browser window, which in my case is hidden behind the page header. So, I need a href click to scroll the page to the (#element window vertical position)+(height of the page header), so that the element doesn't hide inside the header, but instead sits just below the page header. Here is the fiddle link. Please look through this and help me to solve out.

"http : //jsfiddle.net/harshavardhanks/pz1a3z2u/"

Here, on click the 'two' link on left hand index div, my page is scroll such that the title of 'two' section in the right side content div scrolls to the top behind the header "This is a header part" div. I need it top position below this div

Advanced thanks for any help regarding this.

Answer 1

You can add with pseudoselector :before a margin tall like the fixed header.

section > h1:before{ 
    content: ""; 
    display: block; 
    height: 1px; 
    float:right; 
    margin-top: 80px; 
    position: relative; 
    width: 100%; 
} 
section > h1{ 
    margin-top:-80px; 
    position:relative; 
} 

Please check this fiddle:

http://jsfiddle.net/ff8rqr53/