固定ナビゲーションとスティッキーヘッダーを持つアンカー

Question

this jsfiddleに見るとおり、navbarとdivごとに固定ヘッダーがあります。今私が私のアンカーをクリックすると、正しい位置にスクロールされますが、ヘッダーはdivのテキストと重なって表示されます。スクロールダウンしたときに、私は私が私のように、全くたくない、オフセットを受けることを行うと、これは

.header { 
    margin-bottom: 40px; 
} 

を設定することによって達成することができ、私はヘッダはdivの上に位置することにしたい

あなたはここで見ることができます：

Margin bottom

は、重複を避け、余裕を持っていない達成する方法はありますか？ ありがとうございます！

（まだ重複する）のいずれかanswers of this questionで提案されているように、私はすでに、アンカーにpadding-topを追加することでそれを相殺しようとしたが、これは動作しませんでした

Answer 1

このスニペットをチェックしてください：

.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>

を

希望します。