title: Change navbar color depending on scrollbar position
body: <p>im trying to alternate the navbar color depending on the scrollbar position at the moment, for example, if the scrollbar is on top of the page i would like the color to be transparent else, i would like it red.</p>
  
  <p>This is my current code, at the moment what this is doing is that once the user scrolls a little bit, the navbar changes the color to red, but when the user goes all the way to the top again, that background color persists.</p>
  
  <pre><code>    componentDidMount() {
          window.addEventListener("scroll", this.listenScroll);
      }
  
      listenScroll = () =&gt; {
          if(document.body.scrollTop) {
              this.setState({ changeColor: "transparent" });
          } else {
              this.setState({ changeColor: "red" });
          }
      }
  </code></pre>
  
  <p>In other words, when the user scrolbar is on top, change color of the navbar to transparent, else, change it to red.</p>