滑动时固定在头部的一部分会变色（向下滑会变红）

转载于 2018-08-19 20:00:05 发布 · 1.7k 阅读

本文介绍了一种使用JavaScript监听滚动条事件并改变页面头部背景颜色的方法。当页面滚动超过100像素时，头部背景将变为从红色到白色渐变的颜色；反之则从黑色透明到完全透明渐变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

componentDidMount(){
       //console.log(document.getElementsByClassName("header")[0])
       //当页面滚动的时候执行变色
       document.getElementsByClassName("main")[0].onscroll=function(e){
           console.log(e.target.scrollTop)
           //当滚动出去的内容高度超出100，实现变色效果
           if(e.target.scrollTop>=100){
     document.getElementsByClassName("header")[0].style.background="linear-gradient(rgba(235,22,37),rgba(255,255,255,0))"
           }else{
   document.getElementsByClassName("header")[0].style.background="linear-gradient(rgba(1,1,1,0.2),rgba(255,255,255,0))"
           }
       }

   }

.header{
width: 100%;
height: 0.8rem;
background: linear-gradient(rgba(1,1,1,0.2) 0%,rgba(255,255,255,0) 100%);
position: fixed;
top: 0;
left: 0;
z-index: 100;
}