根據滾動條位置更改導航條顏色

Question

我試圖根據當前滾動條的位置來改變導航條的顏色，例如，如果滾動條在頁面頂部，我希望顏色是透明的，否則我希望它是紅色的。

這是我當前的代碼，目前正在執行的操作是，一旦用戶稍微滾動一下，導航欄就會將顏色更改為紅色，但是當用戶再次回到頂部時，背景顏色仍然存在。

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

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

換句話說，當用戶滾動條位於頂部時，將導航條的顏色更改為透明，否則將其更改為紅色。

Answer 1

我將從傳遞給您的listenScroll函數的event中獲取滾動元素。

listenScroll = (event) => {
  if(event.target.scrollingElement.scrollTop) {
    this.setState({ changeColor: "transparent" });
  } else {
    this.setState({ changeColor: "red" });
  }
}

這里的工作示例： https : //jsfiddle.net/dotspencer/mf93wexn/11/