如何创建一个滑动导航栏，当打开时使网站的其余部分变暗？

<div class="navbar">
  <!-- 导航栏内容 -->
</div>

<div class="content">
  <!-- 网站其余内容 -->
</div>

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
  z-index: 9999;
}

.content {
  margin-top: 50px; /* 确保内容不被导航栏遮挡 */
  /* 其余样式设置 */
}

// 获取导航栏和内容的元素
var navbar = document.querySelector('.navbar');
var content = document.querySelector('.content');

// 监听滚动事件
window.addEventListener('scroll', function() {
  // 检查滚动位置
  if (window.scrollY > 0) {
    // 添加滑动效果的CSS类
    navbar.classList.add('scroll');
    content.classList.add('scroll');
  } else {
    // 移除滑动效果的CSS类
    navbar.classList.remove('scroll');
    content.classList.remove('scroll');
  }
});

.navbar.scroll {
  background-color: #000;
  transition: background-color 0.3s ease;
}

.content.scroll {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}