Question

我正在使用codepen来构建一个bsic单页组合，我想创建一个固定的导航栏，然后是几个部分。导航栏必须是固定的。由于某些未知原因，我的导航栏似乎占用了更多空间，并且内容可以在其上方显示。

我无法发现错误，是否有人愿意帮助我？

body {
  background-color: black;
  font-size: 2em;
  color: white;
  height: 100vh;
}

a,
a:hover,
a:visited,
a:link,
a:active {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  animation-name: nav-link-hover;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out
}

nav {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  overflow: hidden;
  width: 100%;
  border-bottom: 1px dotted white;
}

main {
  height: 100%;
  margin-top: 50px;
}

section {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}


/** ANIMATION */

@keyframes nav-link-hover {
  from {
    color: white;
  }
  to {
    color: LawnGreen;
  }
}


/** MEDIA QUERY */

@media (min-width: 1200px) {
  body {
    width: 1140px;
    max-width: 100%;
  }
}

<nav>
  <a href="#me">Rob.dll </a>
  <a href="#portfolio">Portfolio</a>
</nav>
<main>
  <section> dada1 </section>
  <section> dada2 </section>
</main>

这是codepen

Answer 1

我看到你正在使用bootstrap。要拥有一个不是全宽度的固定标题，您必须使用媒体查询使其与其余容器对齐。所以我不得不放置媒体查询以适应引导容器。见下文我希望它有所帮助。 https://codepen.io/blecaf/pen/PmmJav

body {
  background-color: black;
  font-size: 2em;
  color: white;
  height: 100vh;
}

a,
a:hover,
a:visited,
a:link,
a:active {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  animation-name: nav-link-hover;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out
}

nav {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  overflow: hidden;
  width: 100%;
  left: 0;
  border-bottom: 1px dotted white;
  
}

main {
  height: 100%;
  margin-top: 50px;
}

section {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}


/** ANIMATION */

@keyframes nav-link-hover {
  from {
    color: white;
  }
  to {
    color: LawnGreen;
  }
}

.fixed-header {
  max-width: 1110px;
  width: 100%;
  border: 1px yellow solid;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}


/** MEDIA QUERY */

@media (min-width: 576px) {
  .fixed-header {
    max-width: 510px;
  }
}

@media (min-width: 768px) {
  .fixed-header {
    max-width: 690px;
  }
}

@media (min-width: 992px) {
  .fixed-header {
    max-width: 930px;
  }
}

@media (min-width: 1200px) {
  body {
    width: 1140px;
    max-width: 100%;
  }
  .fixed-header {
    max-width: 1110px;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="container">
<nav>
  <div class="fixed-header">
  <a href="#me">Rob.dll </a>
  <a href="#portfolio">Portfolio</a>
  </div>
</nav>
<main>
  <section>    dada1  </section>
  <section>    dada2   </section>
</main>
<body>

如何实现固定的导航栏

1 个答案: