title: How to change font color in sticky nav bar when scrolling down?
body: <p>I tried to change font color in sticky nav bar. When scrolling down, I want to change color of nav background red to another color and font color from white to black. I tried to change font color but it can't be changed.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
   font-size:16px;
   color:#FFFFFF;
   }
  header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: #D02F32;
      clear: both;
      width: 100%;
      min-height: 87px;
   }
  
      /* ==========================================================================
  Navigation Style
  ========================================================================== */
  nav{
   /*background-color:#7E7E7E;*/
   padding:2px;
   width:800px;
   margin:0 auto;
   float:right;
   margin-top:1%;}
  nav ul{
   list-style-type:none;
   text-align:center;
   font-size: 1em;}
  nav li{
   display:inline;
   padding:6px;}
  nav a:hover{ 
   color:#82ED8E;}
  nav a{  
   text-decoration:none;
   color:#FFFFFF;
   font-weight:bold;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
       &lt;header class="sticky"&gt;
          &lt;div class="wrapper"&gt;
            &lt;nav class="menu-top-container"&gt;
             &lt;ul id="top-nav" class="menu"&gt;
               &lt;li&gt;&lt;a href="index.html"&gt;Steps&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="index.html"&gt;questions&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="index.html"&gt;answers&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
            &lt;/nav&gt;
           &lt;/div&gt;
      &lt;/header&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>