title: How to make navigation bar change color when you scroll down the page?
body: <p>I would like the navigation bar to be transparent but when you scroll down the page it changes to color red for example.</p>
  
  <pre><code>&lt;div class="nav"&gt;
        &lt;div class="container"&gt;
         &lt;div class="logo"&gt;
         &lt;a href="#"&gt;&lt;img src="RepublicSquare_logo.svg" style="height: 80px;"&gt;&lt;/a&gt;
         &lt;/div&gt;
          &lt;div class="navMain"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>