前端如何做到 菜单在顶部时 背景颜色为空 不在顶部时菜单含有背景颜色

可以通过监听窗口滚动事件来实现这个效果。当窗口滚动到顶部时，可以通过JavaScript动态修改菜单的CSS样式，将背景颜色设置为空。当窗口滚动下去时，可以将背景颜色设置为需要的颜色。以下是一个简单的实现示例：

HTML:

<nav id="menu">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</nav>

CSS:

#menu {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 10px;
  transition: background-color 0.5s ease;
}

JavaScript:

window.addEventListener('scroll', function() {
  var menu = document.getElementById('menu');
  if (window.scrollY === 0) {
    menu.style.backgroundColor = '';
  } else {
    menu.style.backgroundColor = '#f2f2f2';
  }
});

这段JavaScript代码会监听窗口滚动事件，当窗口滚动时，会根据窗口滚动的距离来修改菜单的背景颜色。当窗口滚动到顶部时，菜单的背景颜色会设置为空，当窗口滚动下去时，菜单的背景颜色会设置为灰色。