jQuery: check if element is visible on screen

index.html

<div class="container">
  <div class="text text-1">
    Lorem ipsum <span></span>
  </div>
  <div class="text text-2">
    Lorem ipsum <span></span>
  </div>
</div>

jquery-check-if-element-is-visible-on-screen.markdown

jQuery: check if element is visible on screen

A Pen by pedrodj46 on CodePen.

License.

script.js

$(window).scroll(function(){
  $('.text').each(function(){
    if(isScrolledIntoView($(this))){
      $(this).children('span').text('visible');
    }
    else{
      $(this).children('span').text('invisible');
    }
  });
});

function isScrolledIntoView(elem){
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

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

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

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$red:#f20;

.container{
  height:100rem;
  
  .text{
    text-align:center;
    font-size:1.5rem;
    
    &.text-1{
      margin-top:5rem;
    }
    &.text-2{
      margin-top:50rem;
    }
    span{
      color:$red;
    }
  }
}