html - Anchors with fixed navigation and sticky header -

as can see in this jsfiddle , have navbar , sticky header per div. if click on anchors scrolled down right position, header overlaps text of div.

i want header positioned above div when scrolling down, can accomplished setting

.header {      margin-bottom: 40px; } 

if offset, don't want @ all, can see here:

margin bottom

is there way accomplish avoiding overlapping , having no margin? thank in advance!

i tried offsetting adding padding-top anchor, suggested in answers of question, did not work either (still overlapping)

check snippet:

.navbar {    position: fixed;    height: 40px;    background: green;    top: 0;    width: 100%;    z-index: 5;  }  .nav_holder{    position:absolute;    top:40px;  }  .content {    margin-top: 60px;  }  .one, .two, .three {    height: 1000px;    padding-top:40px;  }  .header {    position: sticky;    top: 40px;    background: white;  }

<div class="navbar">  navbar  </div>  <div class="content">    <div class="nav_holder">      <a href="#one">one</a>      <a href="#two">two</a>      <a href="#three">three</a>    </div>    <div id="one" class="header">      header 1    </div>    <div class="one">      lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla sit amet magna ut nisl facilisis sodales. etiam auctor ut lectus id vulputate. nunc id scelerisque nibh. maecenas vel aliquam quam. suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. nunc efficitur orci neque, sed malesuada magna congue at.      lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla sit amet magna ut nisl facilisis sodales. etiam auctor ut lectus id vulputate. nunc id scelerisque nibh. maecenas vel aliquam quam. suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. nunc efficitur orci neque, sed malesuada magna congue at.      lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla sit amet magna ut nisl facilisis sodales. etiam auctor ut lectus id vulputate. nunc id scelerisque nibh. maecenas vel aliquam quam. suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. nunc efficitur orci neque, sed malesuada magna congue at.      lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla sit amet magna ut nisl facilisis sodales. etiam auctor ut lectus id vulputate. nunc id scelerisque nibh. maecenas vel aliquam quam. suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. nunc efficitur orci neque, sed malesuada magna congue at.      lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla sit amet magna ut nisl facilisis sodales. etiam auctor ut lectus id vulputate. nunc id scelerisque nibh. maecenas vel aliquam quam. suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. nunc efficitur orci neque, sed malesuada magna congue at.    </div>    <div id="two" class="header">      header 2    </div>    <div class="two">      lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla sit amet magna ut nisl facilisis sodales. etiam auctor ut lectus id vulputate. nunc id scelerisque nibh. maecenas vel aliquam quam. suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. nunc efficitur orci neque, sed malesuada magna congue at.    </div>    <br/>    <div id="three" class="header">      header 3    </div>    <div class="three">      lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla sit amet magna ut nisl facilisis sodales. etiam auctor ut lectus id vulputate. nunc id scelerisque nibh. maecenas vel aliquam quam. suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. nunc efficitur orci neque, sed malesuada magna congue at.    </div>  </div>

hope helps