如何制作粘性导航栏？

<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
  </ul>
</nav>

<!-- 页面内容 -->
<section id="section1">
  <!-- Section 1 内容 -->
</section>

<section id="section2">
  <!-- Section 2 内容 -->
</section>

<section id="section3">
  <!-- Section 3 内容 -->
</section>

<section id="section4">
  <!-- Section 4 内容 -->
</section>

nav {
  background-color: #f2f2f2;
  color: #333;
  font-size: 16px;
  /* 其他样式属性 */
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: center; /* 居中显示导航链接 */
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: inherit;
}

window.addEventListener("scroll", function() {
  var nav = document.querySelector("nav");
  var sticky = nav.offsetTop;

  if (window.pageYOffset >= sticky) {
    nav.classList.add("sticky");
  } else {
    nav.classList.remove("sticky");
  }
});

nav.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  /* 其他样式属性 */
}