固定导航栏在从导航跳转到页面的一部分时隐藏内容

Question

当我点击导航时，例如 - Home，我会到达 Home，但它从导航后面开始，我想让它从导航下面开始。我已经尝试过 body padding-top 但没有任何反应。 IDK 如何解决这个问题。

代码如下：

html,
body,
#pages {
  font-family: Arial, Helvetica;
  line-height: 1.25;
  padding: 0;
  margin: 0;
  background-color: #0d0d0d;
  color: #e6e6e6;
}


/* Global */

.container {
  width: 85%;
  margin: auto;
  overflow: hidden;
}

.container1 {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

#First a {
  border-left: 2px solid #808080;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

#Last a {
  border-right: 2px solid #808080;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}


/* Header */

header {
  overflow: hidden;
  background-color: #e6e6e6;
  color: #0d0d0d;
  padding-top: 10px;
  margin: 0;
  min-height: 70px;
  border-bottom: #808080 5px solid;
  position: fixed;
  width: 100%;
  top: 0px;
}

header a {
  font-weight: bold;
  text-decoration: none;
  font-size: 20px;
  color: #e6e6e6;
  margin: 0px;
  padding: 10px;
  background-color: #0d0d0d;
  border-top: 2px solid #808080;
  border-bottom: 2px solid #808080;
}

header a:hover {
  color: #0d0d0d;
  background-color: #e6e6e6;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  float: left;
  display: inline-block;
  padding: 5px 0px 10px 0px;
}

header .logo {
  float: left;
}

header .logo h1 {
  margin-top: 10px;
}

header nav {
  float: right;
  margin-top: 15px
}


/* Text Boxy */

#pages {
  float: left;
  margin-top: 100px;
  overflow: hidden;
}

.textBox {
  border-radius: 5px;
  border: 3px solid #e6e6e6;
  margin-bottom: 50px;
  margin-top: 100px;
}

.textArea {
  padding: 0 10px;
}

footer {
  background-color: #e6e6e6;
  color: #0d0d0d;
  text-align: center;
  padding-bottom: 1px;
  margin: 0;
}

#footer {
  border-top: 5px #808080 solid;
}

<header>
  <div class="container">
    <div class="logo">
      <h1>Airsoft Košťany</h1>
    </div>

    <nav>
      <ul>
        <li id="First"><a href="#Home">Home</a></li>
        <li><a href="#Team">Team</a></li>
        <li><a href="#Edit">Edit</a></li>
        <li id="Last"><a href="#Kontakt">Kontakt</a></li>
      </ul>
    </nav>

  </div>
  <!-- End Container-->
</header>

<section id="pages">
  <div class="container">
    <div class="textBox" id="Home">
      <div class="textArea">
        <h3>Home</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Team">
      <div class="textArea">
        <h3>Team</h3>
        <p>Dalibor Trampota</p>
        <img src="">
        <p>Hodnost: Zakladatel <br> Role: Sniper <br> PlayStyle: Utočný sniper<br> Výbava: MB4403D Sniper Rifle</p>
        <br>
        <br>

        <p>Vašek Franta Václav</p>
        <img src="">
        <p>Hodnost: <br> Role: Assault <br> PlayStyle: <br> Výbava: AK74-S</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Edit">
      <div class="textArea">
        <h3>Edit</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Kontakt">
      <div class="textArea">
        <h3>Kontakt</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Page4">
      <div class="textArea">
        <h3>Edit4</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>

  </div>
  <!-- End Container-->
</section>
<div class="container1">
  <footer>
    <div id="footer">
      <p><b>Název Sem, Copyright &copy, 2018</b></p>
    </div>
  </footer>
</div>

我只想用 html 和 css 修复它，而不是 javascript，谢谢。

Answer 1

Here 是一篇精彩的文章，介绍了如何做到这一点。为此，您必须使用一个伪元素 (::before) 并创建一个负边距和您希望的高度以使其在导航下可见。

#Home::before { 
  display: block; 
  content: " "; 
  margin-top: -45px; 
  height: 45px; 
  visibility: hidden; 
  pointer-events: none;
}

并且您必须为所有想要内部导航的 id 执行此操作，例如- Home、Team、Edit、Kontakt,等等

完整代码如下：

html,
body,
#pages {
  font-family: Arial, Helvetica;
  line-height: 1.25;
  padding: 0;
  margin: 0;
  background-color: #0d0d0d;
  color: #e6e6e6;
}


/* Global */

.container {
  width: 85%;
  margin: auto;
  overflow: hidden;
}

.container1 {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

#First a {
  border-left: 2px solid #808080;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

#Last a {
  border-right: 2px solid #808080;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}


/* Header */

header {
  overflow: hidden;
  background-color: #e6e6e6;
  color: #0d0d0d;
  padding-top: 10px;
  margin: 0;
  min-height: 70px;
  border-bottom: #808080 5px solid;
  position: fixed;
  width: 100%;
  top: 0px;
}

header a {
  font-weight: bold;
  text-decoration: none;
  font-size: 20px;
  color: #e6e6e6;
  margin: 0px;
  padding: 10px;
  background-color: #0d0d0d;
  border-top: 2px solid #808080;
  border-bottom: 2px solid #808080;
}

header a:hover {
  color: #0d0d0d;
  background-color: #e6e6e6;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  float: left;
  display: inline-block;
  padding: 5px 0px 10px 0px;
}

header .logo {
  float: left;
}

header .logo h1 {
  margin-top: 10px;
}

header nav {
  float: right;
  margin-top: 15px
}


/* Text Boxy */

#pages {
  float: left;
  margin-top: 100px;
  overflow: hidden;
}

#Home::before {
  display: block;
  content: " ";
  margin-top: -45px;
  height: 45px;
  visibility: hidden;
  pointer-events: none;
}

#Team::before {
  display: block;
  content: " ";
  margin-top: -45px;
  height: 45px;
  visibility: hidden;
  pointer-events: none;
}

#Edit::before {
  display: block;
  content: " ";
  margin-top: -45px;
  height: 45px;
  visibility: hidden;
  pointer-events: none;
}

#Kontakt::before {
  display: block;
  content: " ";
  margin-top: -45px;
  height: 45px;
  visibility: hidden;
  pointer-events: none;
}

.textArea {
  border-radius: 5px;
  border: 3px solid #e6e6e6;
  margin-bottom: 50px;
  margin-top: 100px;
  padding: 0 10px;
}

footer {
  background-color: #e6e6e6;
  color: #0d0d0d;
  text-align: center;
  padding-bottom: 1px;
  margin: 0;
}

#footer {
  border-top: 5px #808080 solid;
}

<header>
  <div class="container">
    <div class="logo">
      <h1>Airsoft Košťany</h1>
    </div>

    <nav>
      <ul>
        <li id="First"><a href="#Home">Home</a></li>
        <li><a href="#Team">Team</a></li>
        <li><a href="#Edit">Edit</a></li>
        <li id="Last"><a href="#Kontakt">Kontakt</a></li>
      </ul>
    </nav>

  </div>
  <!-- End Container-->
</header>

<section id="pages">
  <div class="container">
    <div class="textBox" id="Home">
      <div class="textArea">
        <h3>Home</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Team">
      <div class="textArea">
        <h3>Team</h3>
        <p>Dalibor Trampota</p>
        <img src="">
        <p>Hodnost: Zakladatel <br> Role: Sniper <br> PlayStyle: Utočný sniper<br> Výbava: MB4403D Sniper Rifle</p>
        <br>
        <br>

        <p>Vašek Franta Václav</p>
        <img src="">
        <p>Hodnost: <br> Role: Assault <br> PlayStyle: <br> Výbava: AK74-S</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Edit">
      <div class="textArea">
        <h3>Edit</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Kontakt">
      <div class="textArea">
        <h3>Kontakt</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Page4">
      <div class="textArea">
        <h3>Edit4</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>

  </div>
  <!-- End Container-->
</section>
<div class="container1">
  <footer>
    <div id="footer">
      <p><b>Název Sem, Copyright &copy, 2018</b></p>
    </div>
  </footer>
</div>

Amd 这是 jsfiddle：http://jsfiddle.net/drq9hm70/6/

固定导航栏在从导航跳转到页面的一部分时隐藏内容

fixed navbar hides content when jumping from navigation to part of page

html

css

navigation

nav

fixed