Question

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

我希望在向下滚动时将标题放在div上方，这可以通过设置

来完成

.header { 
    margin-bottom: 40px;
}

如果我这样做，我会得到一个我根本不想要的偏移，正如你在这里看到的那样：

Margin bottom

有没有办法避免重叠并且没有保证金？先感谢您！

我已经尝试通过向answers of this question中的建议添加padding-top来抵消它，但这也不起作用（仍然重叠）

Answer 1

检查此代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

希望有所帮助

具有固定导航和粘性标题的锚点

1 个答案: