Anker mit fester Navigation und sticky header

Question

Wie Sie in this jsfiddle sehen können, habe ich eine Navbar und einen sticky-Header pro div. Wenn ich nun auf meine Anker klicke, scrolle ich in die richtige Position, aber die Kopfzeile überlappt den Text des div.

Ich möchte, dass die Header über dem div positioniert werden, wenn nach unten scrollen, kann diese

.header { 
    margin-bottom: 40px; 
} 

indem erreicht werden, wenn ich tun, dass ich einen Versatz bekommen, die ich gar nicht wollen, wie Sie können hier sehen:

Margin bottom

gibt es eine Möglichkeit, die überlappend und mit keinen Spielraum vermeiden zu erreichen? Vielen Dank im Voraus!

Ich habe bereits versucht es mit Ausgleich padding-top an dem Anker hinzufügen, wie in answers of this question vorgeschlagen, aber das hat nicht funktioniert entweder (noch überlappend)

Answer 1

prüfen diese Schnipsel:

.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 one 
 
    </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 two 
 
    </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 three 
 
    </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>

Hoffe es hilft