Triggering jquery event when an element appears on screen

Question

I want to show a fade effect as soon as the element appears on screen. There is a lot of content before this element so if I trigger the efect on document.ready, at certain

Answer 1

If you want a simple and working sollution:

function elementInView(elem){
  return $(window).scrollTop() < $(elem).offset().top + $(elem).height() ;
};

$(window).scroll(function(){
  if (elementInView($('#your-element')))
  //fire at will!
    console.log('there it is, wooooohooooo!');
});