如何在滚动条上隐藏导航栏并显示侧边栏？

<div class="container">
  <nav class="navbar">导航栏内容</nav>
  <aside class="sidebar">侧边栏内容</aside>
  <!-- 页面内容 -->
</div>

.container {
  position: relative;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #f1f1f1;
  transition: top 0.3s ease-in-out;
}

.sidebar {
  position: absolute;
  top: 0;
  left: -200px;
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  transition: left 0.3s ease-in-out;
}

window.addEventListener('scroll', function() {
  var navbar = document.querySelector('.navbar');
  var sidebar = document.querySelector('.sidebar');
  var threshold = 200; // 滚动阈值，根据需要调整

  if (window.pageYOffset > threshold) {
    navbar.style.top = '-50px';
    sidebar.style.left = '0';
  } else {
    navbar.style.top = '0';
    sidebar.style.left = '-200px';
  }
});