使用div标签实现粘性导航栏（sticky navbar）的问题求助

我用div标签制作导航栏，之前用nav标签配合sticky属性能正常实现粘性导航，但本次项目导师要求用div，沿用常规sticky设置后却未生效，代码如下：

原CSS代码 #

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 1170px;
  margin: auto;
}

header {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("Background.jpg");
  height: 100vh;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  position: relative;
}

.nav-area {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.nav-area li {
  display: inline-block;
}

.nav-area li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Poppins";
  font-size: 16px;
}

.nav-area li a:hover {
  background: #fff;
  color: #333;
}

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

.logo img {
  width: 150px;
  float: left;
  height: auto;
}

.welcome-text {
  position: absolute;
  width: 800px;
  height: 300px;
  margin: 20% 15%;
  text-align: center;
}

.welcome-text h1 {
  text-align: center;
  color: #fff;
  text-transform: uppercase;
}

/*SECTION*/

#section1 {
  height: 100vh;
  background: black;
}

.section1 p {
  color: #fff;
  font-family: "Poppins";
  text-align: center;
}

原HTML代码 #

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="portfolio.css" />
  <title>Shira</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet" />
</head>

<body>
  <header>
    <div class="wrapper" id="home">
      <div class="logo">
        <img src="2.png" />
        <ul class="nav-area" class="sticky">
          <li><a href="#home">home</a></li>
          <li><a href="#section1">About</a></li>
          <li><a href="#">home</a></li>
          <li><a href="#">home</a></li>
          <li><a href="#">home</a></li>
        </ul>
      </div>
      <div class="welcome-text">
        <h1>hi hshjhak</h1>
      </div>
    </div>
  </header>

  <div class="section1">
    <section id="section1">
      <p>AAAAAAA</p>
    </section>
  </div>
</body>

</html>

问题分析与解决方案 #

错误点： #

1. HTML属性错误：给<ul>写了两个独立的class属性，浏览器只会识别第一个class="nav-area"，sticky类并未生效，正确写法是class="nav-area sticky"。
2. 父元素限制：导航栏嵌套在header内，header设置了height:100vh，sticky元素的粘性是相对于最近的滚动父元素，当滚动超出header范围后，导航栏会随header一起移出视口。
3. float布局冲突：使用float会导致元素脱离文档流，影响sticky属性的正常计算，建议用flex布局替代。

修正后的代码： #

CSS代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 粘性导航容器 */
.nav-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: rgba(0,0,0,0.9); /* 添加背景色，滚动后可见 */
  padding: 10px 0;
  z-index: 999; /* 确保导航栏在最上层 */
}

.wrapper {
  width: 1170px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("Background.jpg");
  height: 100vh;
  background-size: cover;
  background-position: center center;
  position: relative;
}

.nav-area {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-area li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Poppins";
  font-size: 16px;
}

.nav-area li a:hover {
  background: #fff;
  color: #333;
}

.logo img {
  width: 150px;
  height: auto;
}

.welcome-text {
  position: absolute;
  width: 800px;
  height: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.welcome-text h1 {
  color: #fff;
  text-transform: uppercase;
}

/*SECTION*/

#section1 {
  height: 100vh;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

#section1 p {
  color: #fff;
  font-family: "Poppins";
  font-size: 24px;
}

HTML代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="portfolio.css" />
  <title>Shira</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet" />
</head>

<body>
  <!-- 把导航栏放在header外面，确保父元素是body -->
  <div class="nav-container">
    <div class="wrapper">
      <div class="logo">
        <img src="2.png" />
      </div>
      <ul class="nav-area">
        <li><a href="#home">home</a></li>
        <li><a href="#section1">About</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
      </ul>
    </div>
  </div>

  <header id="home">
    <div class="welcome-text">
      <h1>hi hshjhak</h1>
    </div>
  </header>

  <section id="section1">
    <p>AAAAAAA</p>
  </section>
</body>

</html>

关键修改说明： #

• 将导航栏容器移到header外部，让其滚动父元素为body，确保滚动时能固定在顶部。
• 使用flex布局替代float，避免布局流冲突，同时更方便对齐logo和导航。
• 给粘性导航容器添加背景色和z-index，保证滚动后导航栏内容可见且不被其他元素遮挡。
• 修正了welcome-text的定位方式，用transform实现居中更可靠。

内容的提问来源于stack exchange，提问作者snekspie