Add Classe when the item visible

The idea of this code, sometimes we need to add a class when the user scrolls and comes to a target element. Maybe we need to animate it or any other purpose.

Use the jQuery code below and add your own class.

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function () {
  $('.taget_class').each(function () {
      if (isScrolledIntoView(this) === true) {
          $(this).addClass('active');
      }else{
        $(this).removeClass('active');
      }
  });
});

Copy the code and change target_class to your target element class or you can use id with the # sign. In the final result, you will see when you scroll to the element an active class added.

Bookmark this site for more useful and amazing code snippet in future.