css 使用固定位置或粘滞位置固定导航栏

ruyhziif 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(153)

大家好，我似乎不能让navbar保持在屏幕顶部。如果我使用position: fixed，navbar保持在内容顶部，所以你看不到它。position: sticky不工作。我推测这是由于在身体上有一个固定的高度？渴望知道如何让这个工作与position: fixed！以下是代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Original Trombones</title>
        <link rel="stylesheet" href="styles.css">
        <script src="https://kit.fontawesome.com/e3044c59d5.js" crossorigin="anonymous"></script>
    </head>
    
    
    <body>
    <div class="wrapper">
    <header>
    <nav class="Navbar">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
        alt="original trombones logo" class="nav-img">
        <ul class="nav-links">
            <li><a href="#" class="link">Features</a></li>
            <li><a href="#" class="link">How It Works</a></li>
            <li><a href="#" class="link">Pricing</a></li>
        </ul>
    </nav>
    </header>
    <section class="hero">
        <h1>Handcrafted, home-made masterpieces</h1>
        <form class="email-form">
        <div class="email-form">
            <label for="email"></label>
            <input type="email" name="email" id="email" placeholder="Enter your email address" required>
        </div>
        <div class="button-center">
            <input class="sub-button" type="submit" value="GET STARTED">
            </div>
        </form>
    </section>
    
    
    <section class="bus-info">
        <div class="features">
        <div class="icon"><i class="fas fa-fire"></i></div>
        <div class="desc">
    <h2 class="feat-title">Premium materials</h2>
    <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
    </div>
    <div class="features">
        <div class="icon"><i class="fas fa-truck"></i></div>
       <div class="desc">
    <h2 class="feat-title">Fast Shipping</h2>
    <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
    not satisfied.</p>
    </div>
    </div>
    <div class="features">
        <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
        <div class="desc">
            <h2 class="feat-title">Quality Assurance</h2>
            <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
            instrument.</p>
        </div>
    </div>
    </section>
    
    <section class="video">
        <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
        </iframe>
    </section>
    
    <section class="tromb-types">
        <div class="type">
            <h3 class="title-tromb">TENOR TROMBONE</h3>
            <h2 class="price">$600</h2>
            <div class="tromb-desc">
            <p  class="text">Lorem ipsum.</p>
            <p  class="text">Lorem ipsum.</p>
            <p  class="text">Lorem ipsum dolor.</p>
            <p  class="text">Lorem ipsum.</p>
            </div>
            <div class="select-button">
            <input class="sub-button" type="submit" value="SELECT">
            </div>
        </div>
    
            <div class="type">
                <h3 class="title-tromb">BASS TROMBONE</h3>
                <h2 class="price">$900</h2>
                <div class="tromb-desc">
                    <p class="text">Lorem ipsum.</p>
                    <p  class="text">Lorem ipsum.</p>
                    <p  class="text">Lorem ipsum dolor.</p>
                    <p  class="text">Lorem ipsum.</p>
                </div>
                <div class="select-button">
                    <input class="sub-button" type="submit" value="SELECT">
                </div>
            </div>
    
                    <div class="type">
                        <h3 class="title-tromb">VALVE TROMBONE</h3>
                        <h2 class="price">$1200</h2>
                        <div class="tromb-desc">
                            <p  class="text">Lorem ipsum.</p>
                            <p  class="text">Lorem ipsum.</p>
                            <p  class="text">Lorem ipsum dolor.</p>
                            <p  class="text">Lorem ipsum.</p>
                        </div>
                        <div class="select-button">
                            <input class="sub-button" type="submit" value="SELECT">
                        </div>
                    </div>
    </section>
    
    <footer>
    <ul class="footer-links">
        <li><a href="#" class="footer-link">Privacy</a></li>
        <li><a href="#" class="footer-link">Terms</a></li>
        <li><a href="#" class="footer-link">Contacts</a></li>
    </ul>
    <p class="copyright">Copyright 2016, Original Trombones</p>
    
    </footer>
    </div>
    </body>
    </html>
    
    <style>
    
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: "Roboto", sans-serif;
      min-height: 100vh;
      background-color: #eee;
      color: black;
    }
    
    .wrapper {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
    
    nav {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      font-weight: 900;
      font-size: 1em;
      padding: 20px 10px;
      flex-wrap: wrap;
      border-bottom: 1px solid grey;
      position: sticky;
    }
    
    ul {
      flex-grow: 1;
      max-width: 30%;
      display: flex;
      justify-content: space-around;
      text-decoration: none;
    }
    
    img {
      display: flex;
      width: 40vw;
    }
    
    ul li {
      display: inline;
      text-decoration: none;
      display: flex;
    }
    
    .nav-links a {
      text-decoration: none;
      color: black;
    }
    
    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    h1 {
      font-size: 2em;
      font-weight: 700;
      padding: 20px;
    }
    
    h2 {
      font-size: 1.4em;
      font-weight: 700;
    }
    
    p {
      font-size: 0.8em;
      letter-spacing: 0.05em;
    }
    
    input[type="email"] {
      padding: 5px 10px;
      margin: 10px 0px;
      border: solid 1px black;
      width: 350px;
    }
    
    form {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    input[type="submit"] {
      margin: 10px auto;
      padding: 5px 15px;
      background-color: #f1c40f;
      font-weight: 900;
      border: #eee solid 0px;
    }
    
    .bus-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .features {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
    
    .desc {
      weight: 125px;
      width: 80vw;
      padding: 5px;
    }
    
    .icon {
      color: #c5a00df8;
      font-size: 2em;
    }
    
    .feat-title {
    }
    
    .features {
      padding-top: 20px;
      border: 40px 0px;
    }
    
    .video {
      margin: auto;
      padding: 30px 0px;
    }
    
    .tromb-types {
      display: flex;
      justify-content: center;
    }
    
    .type {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 50px;
      margin: 20px 10px;
      border: solid black 1px;
    }
    
    .title-tromb {
      font-weight: 700;
      font-size: 0.8em;
    }
    
    .price {
      padding: 20px 0;
    }
    
    .tromb-desc {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .text {
      padding-bottom: 10px;
    }
    
    footer {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      margin-bottom: 20px;
      margin-right: 20px;
    }
    
    .footer-links {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      max-width: 100%;
    }
    
    .footer-links .footer-link {
      text-decoration: none;
      padding: 0px 10px;
      color: black;
    }
    
    .copyright {
      max-width: 100%;
      margin-top: 5px;
    }
    
    @media (max-width: 700px) {
      header {
        font-size: 1em;
      }
      nav {
        display: flex;
        flex-direction: column;
      }
    
      nav > ul {
        display: flex;
        flex-wrap: wrap;
      }
      .tromb-types {
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    
      .type {
        width: 300px;
      }
    
      .price {
        padding: 5px 0;
      }
    }
    </style>

css

来源：https://stackoverflow.com/questions/71426946/fixing-navbar-using-fixed-position-or-sticky-position

1条答案

按热度按时间

jw5wzhpr1#

1.位置：黏黏的

到目前为止，最简单的方法是在header上使用粘性位置，而不是在nav上。因为作为元素，只要我的父元素在屏幕上可见，我就是粘性的。而且因为header的高度不是那么大，所以在nav上使用position:sticky似乎不起作用。要了解更多关于位置sticky的信息，您可以阅读here。
以下是工作示例：

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  min-height: 100vh;
  background-color: #eee;
  color: black;
}

.wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
/* lines I added*/
header {
  position: sticky;
  top: 0;
  z-index: 99;
  background: #eee;
}
nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-weight: 900;
  font-size: 1em;
  padding: 20px 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid grey;
}

ul {
  flex-grow: 1;
  max-width: 30%;
  display: flex;
  justify-content: space-around;
  text-decoration: none;
}

img {
  display: flex;
  width: 40vw;
}

ul li {
  display: inline;
  text-decoration: none;
  display: flex;
}

.nav-links a {
  text-decoration: none;
  color: black;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2em;
  font-weight: 700;
  padding: 20px;
}

h2 {
  font-size: 1.4em;
  font-weight: 700;
}

p {
  font-size: 0.8em;
  letter-spacing: 0.05em;
}

input[type="email"] {
  padding: 5px 10px;
  margin: 10px 0px;
  border: solid 1px black;
  width: 350px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input[type="submit"] {
  margin: 10px auto;
  padding: 5px 15px;
  background-color: #f1c40f;
  font-weight: 900;
  border: #eee solid 0px;
}

.bus-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.features {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.desc {
  weight: 125px;
  width: 80vw;
  padding: 5px;
}

.icon {
  color: #c5a00df8;
  font-size: 2em;
}

.feat-title {
}

.features {
  padding-top: 20px;
  border: 40px 0px;
}

.video {
  margin: auto;
  padding: 30px 0px;
}

.tromb-types {
  display: flex;
  justify-content: center;
}

.type {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 50px;
  margin: 20px 10px;
  border: solid black 1px;
}

.title-tromb {
  font-weight: 700;
  font-size: 0.8em;
}

.price {
  padding: 20px 0;
}

.tromb-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text {
  padding-bottom: 10px;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 20px;
  margin-right: 20px;
}

.footer-links {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  max-width: 100%;
}

.footer-links .footer-link {
  text-decoration: none;
  padding: 0px 10px;
  color: black;
}

.copyright {
  max-width: 100%;
  margin-top: 5px;
}

@media (max-width: 700px) {
  header {
    font-size: 1em;
  }

  nav {
    display: flex;
    flex-direction: column;
  }

  nav > ul {
    display: flex;
    flex-wrap: wrap;
  }

  .tromb-types {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .type {
    width: 300px;
  }

  .price {
    padding: 5px 0;
  }
}

<div class="wrapper">
  <header>
    <nav class="Navbar">
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
      <ul class="nav-links">
        <li><a href="#" class="link">Features</a></li>
        <li><a href="#" class="link">How It Works</a></li>
        <li><a href="#" class="link">Pricing</a></li>
      </ul>
    </nav>
  </header>
  <section class="hero">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form class="email-form">
      <div class="email-form">
        <label for="email"></label>
        <input type="email" name="email" id="email" placeholder="Enter your email address" required>
      </div>
      <div class="button-center">
        <input class="sub-button" type="submit" value="GET STARTED">
      </div>
    </form>
  </section>

  <section class="bus-info">
    <div class="features">
      <div class="icon"><i class="fas fa-fire"></i></div>
      <div class="desc">
        <h2 class="feat-title">Premium materials</h2>
        <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div class="features">
      <div class="icon"><i class="fas fa-truck"></i></div>
      <div class="desc">
        <h2 class="feat-title">Fast Shipping</h2>
        <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
          not satisfied.</p>
      </div>
    </div>
    <div class="features">
      <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
      <div class="desc">
        <h2 class="feat-title">Quality Assurance</h2>
        <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
          instrument.</p>
      </div>
    </div>
  </section>

  <section class="video">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
    </iframe>
  </section>

  <section class="tromb-types">
    <div class="type">
      <h3 class="title-tromb">TENOR TROMBONE</h3>
      <h2 class="price">$600</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>

    <div class="type">
      <h3 class="title-tromb">BASS TROMBONE</h3>
      <h2 class="price">$900</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>

    <div class="type">
      <h3 class="title-tromb">VALVE TROMBONE</h3>
      <h2 class="price">$1200</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>
  </section>

  <footer>
    <ul class="footer-links">
      <li><a href="#" class="footer-link">Privacy</a></li>
      <li><a href="#" class="footer-link">Terms</a></li>
      <li><a href="#" class="footer-link">Contacts</a></li>
    </ul>
    <p class="copyright">Copyright 2016, Original Trombones</p>

  </footer>
</div>

2.位置：固定的

如果在body上添加一些padding-top，则可以修复，如下所示：
一个二个一个一个

赞(0）回复(0）举报 2023-03-20

我来回答

css 使用固定位置或粘滞位置固定导航栏

1条答案

1.位置：黏黏的

2.位置：固定的

相关问题

热门标签

最新问答