如何在向下滚动时使标题背景部分透明

<div class="scroll-header">
  <h1>标题</h1>
</div>

.scroll-header {
  background-color: #ffffff; /* 设置初始的背景颜色 */
  opacity: 1; /* 设置初始的透明度 */
  transition: background-color 0.5s, opacity 0.5s; /* 添加过渡效果 */
}

window.addEventListener('scroll', function() {
  var scrollPosition = window.scrollY; // 获取滚动位置

  if (scrollPosition > 0) {
    var opacity = 1 - (scrollPosition / 200); // 根据滚动位置计算透明度
    opacity = Math.max(0, opacity); // 限制透明度的最小值为0

    var header = document.querySelector('.scroll-header');
    header.style.opacity = opacity; // 设置标题背景的透明度
  }
});