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

Question

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

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

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

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

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

Answer 1

我会从qazxsw poi中获取滚动元素，并将其传递到你的qazxsw poi函数中。

event

这里的工作示例：listenScroll