How to add class on div scroll top and remove on div scroll out?

I am looking to add 'opacity' class to list items as the top of a div becomes visable in the viewport and removes the class once the div leaves the viewport and visa versa for scrolling up

Here is pen https://codepen.io/anon/pen/pYOrOV

I am not very familiar with jquery so might be making silly mistakes here but is using the waypoint function the way to go or something more like the second option? any suggestions would be much appreciated thank you

$('.wrapperright').scroll(function () {
if(y >= s_body.top && y < e_body.top){
  $('#generationanxiety').addClass('opacity');
}
else 
{
  $('#generationanxiety').removeClass('opacity');
});

from How to add class on div scroll top and remove on div scroll out?