如何在向下滚动时垂直缩小导航栏？

<nav id="navbar">
  <!-- 导航栏内容 -->
</nav>

#navbar {
  height: 60px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  transition: transform 0.3s ease;
}

window.addEventListener('scroll', function() {
  var navbar = document.getElementById('navbar');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var scale = 1 - scrollTop / 200; // 根据滚动距离计算缩放比例

  // 限制缩放比例的范围在0.5到1之间
  scale = Math.max(0.5, Math.min(1, scale));

  // 应用缩放效果
  navbar.style.transform = 'scale(' + scale + ')';
});