title: How to add class on div scroll top and remove on div scroll out?
body: <p>I am looking to add 'opacity' class to list items as the top of a div becomes visible in the viewport and remove the class once the div leaves the viewport and vice versa when scrolling up </p>
  
  <p>Here is pen <a href="https://codepen.io/anon/pen/pYOrOV" rel="nofollow noreferrer">https://codepen.io/anon/pen/pYOrOV</a></p>
  
  <p>I am not very familiar with jquery so might be making silly mistakes here but, Is it using the waypoint function the way to go or something more like the second option? any suggestions would be much appreciated thank you.</p>
  
  <pre><code>$('.wrapperright').scroll(function () {
      if(y &gt;= s_body.top &amp;&amp; y &lt; e_body.top){
          $('#generationanxiety').addClass('opacity');
      }
      else 
      {
          $('#generationanxiety').removeClass('opacity');
      }
  });
  </code></pre>