html - 具有固定导航和粘性标题的 anchor

Question

正如您在 this jsfiddle 中看到的那样，每个 div 都有一个导航栏和一个粘性 header 。现在，如果我单击我的 anchor ，我会向下滚动到正确的位置，但标题会与 div 的文本重叠。

我希望在向下滚动时将标题定位在div之上，这可以通过设置来实现

.header { 
    margin-bottom: 40px;
}

如果我这样做，我会得到一个偏移量，这是我根本不想要的，正如您在此处看到的:

Margin bottom

有什么办法可以做到避免重叠和没有边距？ 先感谢您!

我已经尝试通过向 anchor 添加 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>

希望对你有帮助