Javascript 在我滚动时在页眉上添加平滑过渡

我试图在向下滚动时在标题上添加效果。基本上我想改变标题的颜色，当我滚动。我已经做了一个小的javascript代码来做这个更改，但是我还想在这个更改上添加一个平滑的转换。有人能帮我吗？谢谢

这是我的代码和代码笔的链接：

我的JS

将以下内容添加到header类： 过渡：所有。2放松

---

您可以将所有内容更改为背景，以与您的风格完美匹配。

当然可以。还有什么？我觉得自己很愚蠢。非常感谢；）不客气，只要点击我的答案是正确的：D

<header>
  <nav>
  <ul>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Menu</a></li>
  </ul>
</nav>
</header>

:root {
  --menuCor: #013220;
  --menuTransparente: rgba(1, 50, 32, 0.2);
}

* {
  margin: 0;
  padding: 0;
}

body {
  height: 200vh;
  background: url('https://lisboa.smartmove.pt:8083/Fluminense/DemoPortalTorcedor/images/banner_01.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

header {
      background: var(--menuTransparente);
    position: fixed;
      width: 100%;
    height: 60px;
      z-index:2;

    nav {
      ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style-type: none;
        height: 60px;

        li {
          a {
            text-decoration: none;
            color: #fff;
            font-family: 'Open sans';
            font-size: .8rem;
          }  
        } 
      }
    }
  }

const htmlTag = document.querySelector('html');
const bodyTag = document.querySelector('body');
const myNav = document.querySelector('header');
const myElem = document.querySelector('header nav li a');

let scrolled = () => {
  let dec = scrollY / (bodyTag.scrollHeight - innerHeight);
  return Math.floor(dec *100);
}

addEventListener('scroll', () => {
  myNav.style.setProperty('background', scrolled() > 20 ? "var(--menuCor)" : "var(--menuTransparente)");
});

header {
  background: var(--menuTransparente);
  position: fixed;
  width: 100%;
  height: 60px;
  z-index:2;
  transition: all .2s ease-in;