如何添加fadeIn效果或过渡到滚动顶端菜单？

<nav class="scroll-menu">Scroll Menu</nav>

.scroll-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.scroll-menu.show {
  opacity: 1;
}

window.addEventListener('scroll', function() {
  var scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
  var scrollMenu = document.querySelector('.scroll-menu');
  
  if (scrollDistance > 100) {
    scrollMenu.classList.add('show');
  } else {
    scrollMenu.classList.remove('show');
  }
});