title: jQuery - Change class when entering div area (but not with mouse)
body: <p>I came across great sites which had a cool feature, which I'll try to explain here.</p>
  
  <p>I tried to study the .js sources, but as I'm a newbie I couldn't decipher the minified versions. :(</p>
  
  <p>Let's say I have the following markup:</p>
  
  <pre><code>&lt;ul id="posts"&gt;
  
  &lt;li id="photo"&gt; Lorem ipsum &lt;/li&gt;
  
  &lt;ii id="quote"&gt; Lorem ipsum dolor &lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;div id="logo"&gt;My Logo&lt;/div&gt;
  </code></pre>
  
  <p>What I want to do is: when user enters the li#photo area, jQuery would change the #navigator background color to, say, blue. If the user keeps scrolling down he would enter the li#quote, and when he enters the area, jQuery would change #navigator bg color to red.</p>
  
  <p>When I say "enter the area", I mean by scrolling and not by mouse hovering.</p>
  
  <p>There's a Tumblr theme that kind of does what I'm trying to explain:</p>
  
  <p><a href="http://www.figueric.com/" rel="nofollow noreferrer">http://www.figueric.com/</a> (scroll down and see the navigator on the right)</p>
  
  <p>The only thing I can come up is to use the .addclass feature, but I don't know where to start, specially when it comes to recognizing that the user is viewing the li#photo area, for example.</p>
  
  <p>Can you guys give me some light here?</p>