Z tego co wyczytałem, nie ma gotowej funkcji na to.
Co do Twojego kodu:
1. Warunek będzie sprawdzany tylko raz, po załadowaniu strony. Musisz powiedzieć skryptowi, żeby sprawdzał to za każdym razem, jak scrollujesz stronę
2. ":visible" zwróci prawdę, nawet jeśli elementu nie ma na ekranie. Element musiałby być ukryty (display: none)
Rozwiązanie
znalazłem taki oto kod:
jQuery.fn.isOnScreen = function(scope){
var element = this;
if(!element){
return;
}
var target = $(element);
if(target.is(':visible') == false){
return false;
}
scope = $(scope || window);
var top = scope.scrollTop();
var bot = top + scope.height();
var elTop = target.offset().top;
var elBot = elTop + target.height();
return ((elBot <= bot) && (elTop >= top));
};
Wygląda na to, że działa. Demo:
https://jsfiddle.net/cvh1ngx0/1/