如何在向下滚动时更改菜单的背景色？

<nav id="menu" style="background-color: #ffffff;">
  <!-- 菜单内容 -->
</nav>

window.addEventListener('scroll', function() {
  // 在这里编写代码
});

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (scrollTop > 100) {
  // 当滚动位置超过100像素时，更改菜单的背景色
  document.getElementById('menu').style.backgroundColor = '#f0f0f0';
} else {
  // 当滚动位置小于等于100像素时，恢复菜单的初始背景色
  document.getElementById('menu').style.backgroundColor = '#ffffff';
}

window.addEventListener('DOMContentLoaded', function() {
  window.addEventListener('scroll', function() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > 100) {
      document.getElementById('menu').style.backgroundColor = '#f0f0f0';
    } else {
      document.getElementById('menu').style.backgroundColor = '#ffffff';
    }
  });
});