using jquery appear for checking if an element is visible on screen

using jquery appear for checking if an element is visible on screen Demo

View Demo Full Screen View Demo New Tab

using jquery appear for checking if an element is visible on screen Code

HTML

<div class="moo" id="moo">I Am Hidden (almost)</div>

CSS

.moo {
 height:100px;
 width:300px;
 border:3px solid #333;
 padding:30px;
 border-radius:3px;
 text-align:center;
}

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.4.1/jquery.appear.js" integrity="sha512-dPZE9SLz1NVUX9tSX9TYOs2SyaJRBZC9ogOc/VasDFSFrxSDkXv3ZCdgkG8/AzHQ+YVklyqDgSS3aDgMradlNg==" crossorigin="anonymous"></script>

Javascript

$(document).ready(function(){
  $('#moo').on('appear', function(event, $all_appeared_elements) {
    // this element is now inside browser viewport
    $("#moo").text("i am visible");
  });
  $('someselector').on('disappear', function(event, $all_disappeared_elements) {
    // this element is now outside browser viewport
    $("#moo").text("i am <b>NOT</b> visible");
  });
});

/*
$(document).ready(function(){
 $('#moo').appear(function() {
  $("#moo").text("moo");
 });
});
$('<div>test</div>').appear();
*/