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

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();
*/