Call JS function when see element

Question

I want call to function (animation) when I see element on display (scroll to element). I try this:

<script type="text/javascript">
    $('#count-repairs-all').on('show', function() { 
        alert('test'); 
    })
</script>

But it doesn't work. I can't find any plugin for this.

Answer 1

You can try it as:

function isVisible(){
   //do something
alert(1);
}

//bind the  event with element
$('#contentDiv').bind('isVisible', isVisible);

//show div and trigger custom event in callback when div is visible
$('#contentDiv').show('slow', function(){
    $(this).trigger('isVisible');
});

Answer 2

If you are using jQuery you can try this

var element = $('#yourDiv')
if(element.is(':visible')){
//Do some stuff
}
else{
//Do something else
}

Check out jQuery DOCS

Answer 3

$('body').scroll(function(){
  var scrollTop = $('body').scrollTop();
  var topOfCount =  $('#count-repairs-all').offset().top;
  if(scrollTop>topOfCount){
    // dosomeThing
  }
});