Toggle class when object visible in the viewport

Question

I need a script which toggle a class when another class or section is visible in the viewport (during scrolling).

Here I have an script which works for precised distance from top, but can somebody help me to modify it for my needs?

$(window).scroll(function(){
      if ($(this).scrollTop() > 50) {
          $('#viewport').addClass('turn_on');
      } else {
          $('#viewport').removeClass('turn_on');
      }
  });

Answer 1

Working fiddle

Try to add function that detect if element passed in argument is visible :

function isVisisble(elem){
    return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}

$(window).scroll(function(){
   if (isVisisble( $('your_element') ))
      $('#viewport').addClass('turn_on');
   } else {
      $('#viewport').removeClass('turn_on');
   }
});

Hope this helps.