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

在向下滚动时垂直缩小导航栏可以通过以下步骤实现：

使用CSS设置导航栏的初始样式，包括高度、背景颜色、字体大小等。
使用JavaScript监听页面滚动事件。
在滚动事件的回调函数中，获取当前滚动的垂直距离。
根据滚动距离计算导航栏的缩放比例。可以使用CSS的transform: scale()属性来实现缩放效果。
更新导航栏的样式，将缩放比例应用到导航栏上。

以下是一个示例代码：

HTML:

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

CSS:

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

JavaScript:

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 + ')';
});

这样，当页面向下滚动时，导航栏会逐渐垂直缩小。你可以根据实际需求调整滚动距离和缩放比例的计算方式。