如何使导航开始时透明，但在反向滚动时显示在滚动上和淡出；同时保持导航链接可见？

<nav>
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
    <!-- 添加更多导航链接 -->
  </ul>
</nav>

nav {
  background-color: transparent;
  color: white;
}

var prevScrollPos = window.pageYOffset;

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  
  if (prevScrollPos > currentScrollPos) {
    // 向上滚动，显示导航栏
    document.querySelector("nav").style.top = "0";
  } else {
    // 向下滚动，隐藏导航栏
    document.querySelector("nav").style.top = "-100px";
  }
  
  prevScrollPos = currentScrollPos;
}

nav {
  transition: top 0.3s ease-in-out;
}