title: On Scroll change color of menu HTML
body: <p>First of all I'm as newbie in this area. I tried to search about this but nothing fits on what I want.</p>
  
  <p>So I have this html:</p>
  
  <pre><code>&lt;aside&gt;
    &lt;div align="center"&gt;
      &lt;img src="images/teste.jpg" style="width:200px;height:200px;"&gt;
    &lt;/div&gt;
    ...
    &lt;div id="disciplinas"&gt;
       &lt;h3&gt;Disciplinas:&lt;/h3&gt;
      &lt;li&gt;&lt;a href="#x"&gt;x&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#y"&gt;y&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#z"&gt;z&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#w"&gt;w&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;br/&gt;
    &lt;/div&gt;
  &lt;/aside&gt;
  
  &lt;div id="main"&gt;
  &lt;section id="x"&gt;
  &lt;div&gt;
  &lt;img src="images/teste.jpg"&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section id="y"&gt;
  &lt;div&gt;
  &lt;img src="images/teste.jpg"&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  ...
  </code></pre>
  
  <p>I tried this code but didn't work:</p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
  $(document).ready(function(){       
              var scroll_pos = 0;
              $(document).scroll(function() { 
                  scroll_pos = $(this).scrollTop();
                  if(scroll_pos &gt; 210) {
                      $("li").css('background-color', 'blue');
                  } else {
                      $("li").css('background-color', 'red');
                  }
              });
          });
          &lt;/script&gt;
  </code></pre>
  
  <p>I would like to know how can i change the color of the <code>&lt;li&gt;</code> on scroll, when they get to the correct section (or maybe i need to use a div instead).
  Thanks</p>
  
  <p>If it helps, the css of div disciplinas and li:</p>
  
  <pre><code>#disciplinas {
      border: 1px solid;
      margin-top: 5%;
      margin-bottom: 5%;
      text-align: center;
      box-shadow: 10px 10px 5px #DCDCDC;
      background-color: white;
  }
  
  li {
      text-align: center;
    list-style-type: none;
  }
  </code></pre>