具有固定導航和粘貼標題的錨

Question

正如您在this jsfiddle中看到的那樣，每個div都有一個導航欄和一個粘性標題。現在，如果我點擊我的錨點，我會滾動到正確的位置，但標題與div的文本重疊。

我想報頭被放置在div上面向下滾動時，這可以通過設置

.header { 
    margin-bottom: 40px; 
} 

如果我這樣做，我得到一個偏移量來實現，這是我不希望所有的，因爲你可以在這裏看到：

Margin bottom

有什麼辦法來完成，避免重疊和無保證金？ 提前謝謝！

我已經嘗試過用增加padding-top的錨，在answers of this question建議抵消它，但這並沒有工作，要麼（仍然重疊）

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>

希望它有幫助