title: Check if element is between 30% and 60% of the viewport
body: <p>I am trying to change the color of <code>&lt;li&gt;</code> elements when they are between 30% and 60% of the viewport.</p>
  
  <p>So I have this grid of elements stacking side by side like this:</p>
  
  <p><img src="https://i.stack.imgur.com/dZMo4.png" alt="elements stacking side by side"></p>
  
  <p>I ran into few plugins like Waypoints, Viewport Checker and few others but nothing good.</p>
  
  <p>Any idea?</p>
  
  <p>I am using a pretty simple structure :</p>
  
  <p><a href="http://jsfiddle.net/bastienleprince/h7pwo64h/2/">JSFIDDLE</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;link rel="stylesheet" href="css/reset.css"&gt;
      &lt;link rel="stylesheet" href="css/styles.css"&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;!--[if lt IE 9]&gt;
    &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>ul {
      margin: auto;
  }
  ul li {
      width: 300px;
      height: 200px;
      background: #f5f5f5;
      float: left;
      margin: 10px;
  }
  
  ul li.middleviewport{
      background:red;
  }
  </code></pre>