当我向下滚动时，如何将导航栏固定到顶部？我也想有一个导航栏上方的图片，当滚动所有的方式

<div id="navbar-container">
  <img src="image.jpg" alt="Header Image" id="header-image">
  <ul id="navbar">
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</div>

#navbar-container {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff; /* 导航栏背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 导航栏阴影效果，可选 */
  z-index: 100; /* 确保导航栏显示在页面上方，可选 */
}

#header-image {
  width: 100%;
  height: auto;
}

#navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff; /* 导航栏背景色 */
}

#navbar li {
  float: left;
}

#navbar li a {
  display: block;
  color: #333; /* 导航栏链接颜色 */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar li a:hover {
  background-color: #f9f9f9; /* 导航栏链接鼠标悬停颜色，可选 */
}

window.onscroll = function() {
  var navbar = document.getElementById("navbar-container");
  var headerImage = document.getElementById("header-image");
  var sticky = navbar.offsetTop;
  
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
    headerImage.style.display = "none";
  } else {
    navbar.classList.remove("sticky");
    headerImage.style.display = "block";
  }
};

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