我的粘性导航栏不工作/部分工作

Question

我想制作一个像下面这样的粘性导航栏 link：https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_sticky

但是，当我将 positon: sticky; 属性添加到我的代码中的元素时，它可以正常工作，并且导航栏在滚动后保持不变，但当我进一步向下滚动时，它会消失。

我希望导航栏像示例中那样具有粘性。

<!DOCTYPE html>
<html class="homebackground">
<head>
  <title>
    Apex Legends Fan-site
  </title>
  <link rel="stylesheet" type="text/css" href="/CSS/cssfile.css">
</head>
<body class="homebackground">
  <header>
    <img src="../Images/Logo/apexlogo.png" height=150px; class="center">
  </header>
  <nav class="sticky">
    <ul>
      <li><a class="active" href="../Home/home.html">Home</a></li>
      <li><a href="../Legends/legends.html">Legends</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Submissions</a></li>
    </ul>
  </nav>
  <div class="border">
    <button class="btn"> <img src="../Images/Body_Images/apexlegends.jpg" width="40%" class="center1"> </button>
  </div>
  <section>
    <p class="pcontainer">
      Apex Legends is a free-to-play first-person shooter battle royale game developed by Respawn
      Entertainment
      and
      published by Electronic Arts. It was released for Microsoft Windows, PlayStation 4, and Xbox
      One on February
      4, 2019, without any prior announcement or marketing. A Nintendo Switch version is planned
      for release in
      late 2020, along with cross-platform play between all supported platforms set to release on
      October 6, 2020.
    </p>
    <img src="../Images/Body_Images/image1.jpg" class="center" width="50%">
    <p class="pcontainer"> In Apex Legends, up to 20 three-person squads or 30 two-person duos land
      on an island and
      search for weapons
      and supplies before attempting to defeat all other players in combat. The available play area
      on the island
      shrinks over time, forcing players to keep moving or else find themselves outside the play
      area which can be
      fatal. The final team alive wins the round. The game is set in the same science fiction
      universe as Respawn
      Entertainment's Titanfall and Titanfall 2.</p>
  </section>
</body>
</html>

/* Header */

header h1 {
  color: firebrick;
  -webkit-text-stroke: 0.5px rgb(255, 255, 255);
  font-size: 50px;
  text-align: center;
}

header {
  border: 2px solid rgb(102, 102, 102);
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 0px;
  background-image: linear-gradient( to left, black 45%, rgb(94, 5, 5));
  overflow: hidden;
}

/* Navigation Bar */

nav {
  width: 100%;
  overflow: hidden;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.sticky {
  position: sticky;
  top: 0;
}

nav li {
  float: left;
  border-right: 1px solid #bbb;
  border-top-right-radius: 0px;
  border-radius: 10px;
  width: 19.8%;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 50px;
  margin: 0px;
  text-decoration: none;
  font-size: 20px;
  line-height: 25px;
  border-radius: 4px;
  display: block;
  text-align: center;
  overflow: hidden;
}

/*@media screen and (max-width: 1000px) {
nav li a:last-child {
font-size: 13px;
}

}*/

nav li:hover {
  background-color: red;
}

/* Background */

.homebackground {
  background-image: url("../Images/background/background1.jpg");
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  height: 100%;
}

@media screen and (max-width: 1000px) {
  .homebackground {
    background-image: url("../Images/background/background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
  }
}

.legendsbackground {
  background-color: black;
}

body {
  margin: 0px;
}

/* For positioning images */

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* For hover-highlight in Legends Section */

.octane {
  margin-top: 20%;
  margin-bottom: 0px;
  margin-left: 70%;
  margin-right: 0;
}

.green :hover {
  background-image: url(../Images/Legends_pics/octanechibihover.png);
}

/* For assigning properties to divs */

.border {
  margin-top: 40px;
  border: 4px solid #953036;
  background-color: #953036;
}

/* Paragraph Containers */

.pcontainer {
  color: aliceblue;
  margin: 10px;
  padding: 20px;
  border: 4px solid #953036;
  background-color: rgb(12, 12, 12);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  border-radius: 10px;
}

Answer 1

从 .homebackground 中删除 height:100% 你已准备好出发。并且请不要在您的正文中包含 class ，这是一个很好的做法。如果你想看代码，Here's my pen

告诉我它是否适合你。

我的粘性导航栏不工作/部分工作

My sticky nav bar isn't working/ partially working

html

navigation

navbar