html 菜单滚动切换

你可以使用 CSS 的 overflow 和 scroll 属性来创建一个滚动菜单，然后使用 JavaScript 监听滚动事件来实现切换效果。

首先，HTML 代码中需要有一个包含菜单项的容器，例如一个 div 元素。然后，使用 CSS 设置该容器的高度和 overflow 属性：

<div class="menu-container">
  <ul class="menu">
    <li><a href="#">菜单项 1</a></li>
    <li><a href="#">菜单项 2</a></li>
    <li><a href="#">菜单项 3</a></li>
    <li><a href="#">菜单项 4</a></li>
    <li><a href="#">菜单项 5</a></li>
    <li><a href="#">菜单项 6</a></li>
    <li><a href="#">菜单项 7</a></li>
    <li><a href="#">菜单项 8</a></li>
    <li><a href="#">菜单项 9</a></li>
    <li><a href="#">菜单项 10</a></li>
  </ul>
</div>

<style>
.menu-container {
  height: 200px;
  overflow: auto;
}
</style>

接下来，可以使用 JavaScript 监听菜单容器的滚动事件，并根据滚动的位置来切换菜单的显示状态。以下是一个示例代码：

var menuContainer = document.querySelector('.menu-container');
var menu = document.querySelector('.menu');

menuContainer.addEventListener('scroll', function() {
  var scrollTop = menuContainer.scrollTop;
  var menuHeight = menu.offsetHeight;
  var containerHeight = menuContainer.offsetHeight;

  if (scrollTop == 0) {
    menu.classList.remove('scrolled');
  } else if (scrollTop + containerHeight == menuHeight) {
    menu.classList.remove('scrolled');
  } else {
    menu.classList.add('scrolled');
  }
});

这段代码会在菜单容器滚动时触发，获取当前滚动的位置和菜单的高度以及容器的高度，然后根据这些值来判断是否需要切换菜单的显示状态。在这个示例中，我们给菜单添加了一个名为 "scrolled" 的 CSS 类来表示菜单已经滚动。你可以根据自己的需求来设置这个类的样式。

最后，你需要在 CSS 中设置菜单的默认状态和滚动状态的样式：

.menu {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.menu li {
  flex: 1 0 100%;
  list-style: none;
}

.menu a {
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.menu.scrolled li:not(:first-child) {
  display: none;
}

这个示例代码中，菜单使用了 flex 布局，并设置了每个菜单项的宽度为容器的宽度。在菜单滚动时，我们通过添加 .scrolled 类来隐藏除第一个菜单项以外的所有菜单项。

这样就完成了一个简单的 HTML 菜单滚动切换效果。你可以根据自己的需求来修改菜单的样式和切换逻辑。