title: Add class when div visible on screen
body: <p>I have this HTML code :</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="menu" id="menu-features"&gt;
          &lt;a href="#features"&gt;Features&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;a id="features"&gt;&lt;/a&gt;
  &lt;div id="div-features"&gt;
  &lt;!-- SOME CODE HERE --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I have this jQuery script :</p>
  
  <pre><code>    $(document).ready(function(){
          if $('#div-features').visible(){
              $('#menu-features').addClass("active");
          }
      });
  </code></pre>
  
  <p>now, here's the problem : </p>
  
  <p>I want to add a class to list item, in this case <code>#menu-features</code> only when div <code>#div-features</code> visible on the screen. once it's not visible then the class will be removed. </p>
  
  <p>but, it seems that jQuery <code>.addClass</code> not affecting anything on <code>#menu-features</code>.</p>
  
  <p>what did I do wrong here? thank you.</p>
  
  <p>UPDATE : I tried also, but still failed </p>
  
  <pre><code>$(document).ready(function(){
      if ($('#div-features').is(':visible')){
          //$('#menu-features').addClass("active");
          alert('Hello, World!!');
      }                               
  });
  </code></pre>