¿Hay alguna forma de detectar cuándo un elemento HTML está oculto a la vista?

Usando Javascript, ¿es posible detectar cuándo un determinado elemento ya no es visible, como cuando el usuario se desplaza lo suficiente o cuando el navegador está minimizado o cubierto con otra ventana? El objective general es intercambiar un anuncio solo cuando el anuncio actual no es visible para el usuario.

Una idea sería tener un Java Applet invisible muy simple que se comunique con la página cada vez que se llame al método paint (). Estoy bastante seguro de que esto funcionaría, pero me gustaría evitar el uso de applets si es posible.

No estoy seguro de si hay una manera de detectar si una ventana está sobre el elemento o si la ventana está minimizada (aunque creo que puede hacer esto último al enganchar algo en el borrón de la ventana. No estoy seguro. ..). De todos modos, en lo que respecta al desplazamiento, esa parte de la pregunta se ha preguntado varias veces antes, y esta es la demostración rápida que se me ocurrió para mostrar cómo hacerlo. En el ejemplo, algo sucede cuando el elemento se desplaza a la vista, pero la lógica es, por supuesto, la misma. De todos modos, el código es:

$(document).ready(function() { function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); } var myelement = $('#formcontainer'); var mymessage = $('#mymessage'); $(window).scroll(function() { if(isScrolledIntoView(myelement)) { mymessage.hide(); } else { mymessage.show(); } }); }); 

No hay mucho de jQuery específico sobre eso, así que puedes sacar eso:

 window.addEventListener('load', function() { function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); } var el = document.getElementById('myelement'); window.addEventListener('scroll', function() { if(isScrolledIntoView(el)) { // do something when element is scrolled into view } else { // do something when it is not in view } }, false); }, false);