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

【问题标题】：My sticky nav bar isn't working/ partially working我的粘性导航栏不工作/部分工作
【发布时间】：2021-01-31 21:06:14
【问题描述】：

我想制作一个类似于此链接中的粘性导航栏：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;
}

【问题讨论】：

能否请您重新排列您的代码，以便我可以正常查看？
您希望我如何重新安排？
只需编辑您的代码并使其可运行，我假设您是 stackoverflow 的新手。按照他们的步骤。或者，如果您没有时间，可以将代码发送到我的 Twitter 帐户。
是的，我是 stackoverflow 的新手。如何使它可运行？你是在说那些“小提琴”吗？
好吧，我在 JSFiddle 中尝试过，但图像没有加载，因为它们是本地保存在我的 PC 上的。 jsfiddle.net/bkmeg6cf谢谢你的帮助你可以看到导航栏向下滚动后消失了

标签： html navigation navbar

【解决方案1】：

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

让我知道它是否适合你。

【讨论】：

太棒了..别忘了接受我的回答，这样以后其他人可以看到。
谢谢伙计...这真的激励我回答像你这样的人:)