Question

当我向下滚动页面时，导航栏停留在顶部，稍后部分保持上升，但是它正在导航栏中。导航栏看起来是透明的。

代码https://codepen.io/manpreetwadhoun/pen/LvMjBY

<html lang="en">
<head>
<meta charset="utf-8">
<title>1st</title>
</head>
<body>
<div>
    <h1 >head</h1> 
    <header >
      <ul  id="listContainer">
        <li >
          <a href="#">Home</a>

        </li> 
        <li >
          <a  href="#">About</a></li> 
        <li >
          <a href="#">Menu</a></li>
        <li >
          <a href="#">Order Online</a></li>

      </ul>

    </header>

  <section>
    <img src="https://www.w3schools.com/w3images/fjords.jpg" alt="home- 
 dish">

  </section>

</div>


</body>
</html>

Answer 1

您使用的大图像覆盖了下面屏幕的大部分区域。 document root的自然背景颜色是白色，除非在元素上指定了背景颜色，例如html或body。

这里的白色只是一种幻觉。

只需将背景颜色添加到标题中即可：

header {
  position: sticky;
  background-color: #fff;
}

现在您拥有想要的持久背景。

Answer 2

据我了解，您只需将以下样式添加到标头元素

    background-color: #fff;
    border-color: #fff;

为什么导航栏是透明的？

2 个答案: