Anchors with fixed navigation and sticky header

问题

As you can see in this jsfiddle , I have a navbar and a sticky header per div. Now if i click on my anchors I get scrolled down to the right position, but the header overlaps the text of the div.

I want the header to be positioned above the div when scrolling down, this can be accomplished by setting

.header { 
    margin-bottom: 40px;
}

If I do that I get an offset, which I don't want at all, as you can see here:

Margin bottom

Is there any way to accomplish avoiding the overlapping and having no margin? Thank you in advance!

I already tried offsetting it with adding padding-top to the anchor, as suggested in answers of this question, but this did not work either (still overlapping)

回答1:

Check this snippet:

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

Hope it helps

来源：https://stackoverflow.com/questions/45306165/anchors-with-fixed-navigation-and-sticky-header

标签

html

css

anchor