如何使第二个导航栏菜单粘滞正常工作？

<nav id="navbar">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</nav>
<div id="content">
  <!-- 页面内容 -->
</div>

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f1f1f1;
  /* 其他样式属性 */
}

#navbar.sticky {
  /* 添加固定样式 */
  position: fixed;
  top: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#content {
  margin-top: 50px; /* 调整页面布局，避免被导航栏遮挡 */
}

window.addEventListener('scroll', function() {
  var navbar = document.getElementById('navbar');
  var sticky = navbar.offsetTop;
  if (window.pageYOffset >= sticky) {
    navbar.classList.add('sticky');
  } else {
    navbar.classList.remove('sticky');
  }
});