根据滚动条位置更改导航栏颜色

Question

我试图根据当前的滚动条位置替换导航栏颜色，例如，如果滚动条位于页面顶部，我希望颜色是透明的，我希望它是红色的。

这是我当前的代码，目前正在做的是，一旦用户滚动一点，导航栏将颜色更改为红色，但当用户再次一直到顶部时，该背景颜色仍然存在。

    componentDidMount() 
        window.addEventListener("scroll", this.listenScroll);
    

    listenScroll = () => 
        if(document.body.scrollTop) 
            this.setState( changeColor: "transparent" );
         else 
            this.setState( changeColor: "red" );

换句话说，当用户滚动条位于顶部时，将导航栏的颜色更改为透明，否则，将其更改为红色。