如何在页面滚动时动态调整元素（导航栏）的背景透明度（alpha值）

实现方案 #

你直接复制下面两段代码替换对应部分即可，不需要修改现有HTML结构，操作非常简单：

1. 新增JS代码

把这段代码放在你页面</body>结束标签的前面即可：

// 对应你导航栏的RGB颜色值，不用改
const navRGB = [247, 252, 255]
const navbar = document.querySelector('.navbar')
// 可自定义：导航栏从全透明滚动到完全不透明需要的滚动距离，单位px
const maxScrollDistance = 200

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY || window.pageYOffset
  // 自动计算alpha通道值
  let alpha = scrollY / maxScrollDistance
  alpha = alpha > 0.98 ? 0.98 : alpha
  navbar.style.backgroundColor = `rgba(${navRGB[0]}, ${navRGB[1]}, ${navRGB[2]}, ${alpha})`
})

你可以调整maxScrollDistance的数值控制效果，数值越大，导航栏从透明变实需要滚动的距离越长。

2. 调整CSS代码

你原有CSS里的冲突规则会干扰效果，替换成下面的即可：

.navbar {
    background-color: rgba(247, 252, 255, 0);
    -webkit-transition: background-color 1.25s ease-out;
    -moz-transition: background-color 1.25s ease-out;
    -o-transition: background-color 1.25s ease-out;
    transition: background-color 1.25s ease-out;
}

.navbar:hover,
.navbar:focus {
    background-color: rgba(247, 252, 255, .9);
}

原有代码里的.navbar:active/.navbar:visited规则、重复的@keyframes代码都可以直接删除，避免干扰滚动效果。

内容的提问来源于stack exchange，提问作者jstory