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

componentDidMount(){
        //console.log(document.getElementsByClassName("header")[0])
        //当页面滚动的时候执行变色
        document.getElementsByClassName("main")[0].οnscrοll=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;
    }