在第一屏才是透明。往下拉就不透明。请问怎么设置呢？

Question

网址：http://www.clevermama.com.cn/

请问这个首页导航栏是透明的。其他页面不透明。
首页那个透明。也不是一直透明。而是在第一屏才是透明。往下拉就不透明。请问怎么设置呢？

Answer 1

这个是监听滚动事件，设置一个分界值，比如100。 scrollTop小于100，则不设置背景色或者背景色设置为透明，大于则背景色设置为白色。很多网页有这样的处理。

比如当前思否问答页面，你可以打开控制台执行以下语句:

window.addEventListener('scroll', event => {
  const head = document.querySelector('#sf-header') // 思否页头
  head.classList.remove('bg-white') // 移除原有背景色class
  if (document.scrollingElement.scrollTop > 100) {
    head.style.background = '#fff' // 白色
  } else {
    head.style.background = 'transparent' // 透明
  }
})

然后滚动页面看看，就能看到页头背景在透明和白色之间切换效果了。

Answer 2

楼上的没毛病；
这个动画根绝有些生硬，渐变会好看一点；

const num = 300;
let opacity = Math.abs(Math.round(event.y)) / num;
head.style.background = rgba(43,162,251, opacity); // 白色