javascript - last - jquery when element is visible on screen
Jquery comprueba si el elemento está visible en la ventana gráfica (6)
Esta pregunta ya tiene una respuesta aquí:
Función para verificar si la clase div "media" está dentro de la ventana visual del navegador independientemente de la posición de desplazamiento de la ventana.
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<div class="main">
<div class="media"></div>
</div>
</BODY>
</HTML>
Tratando de usar este complemento https://github.com/customd/jquery-visible con esta función, pero no sé cómo hacerlo funcionar.
$(''#element'').visible( true );
Bueno, ¿cómo trataste de hacerlo funcionar? De acuerdo con la documentación para ese complemento, .visible() devuelve un valor booleano que indica si el elemento está visible. Entonces lo usarías así:
if ($(''#element'').visible(true)) {
// The element is visible, do something
} else {
// The element is NOT visible, do something else
}
Puede escribir una función jQuery como esta para determinar si un elemento se encuentra en la ventana gráfica.
Incluye esto en alguna parte después de que jQuery esté incluido:
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
Uso de muestra:
$(window).on(''resize scroll'', function() {
if ($(''#Something'').isInViewport()) {
// do something
} else {
// do something else
}
});
Tenga en cuenta que esto solo verifica las posiciones superior e inferior de los elementos, no comprueba si un elemento se encuentra fuera de la ventana horizontal.
Puedes ver este ejemplo .
// Is this element visible onscreen?
var visible = $(#element).visible( detectPartial );
detectarPartial:
- Verdadero: todo el elemento es visible
- falso: parte del elemento es visible
visible es una variable booleana que indica si el elemento es visible o no.
Aquí hay una manera de hacerlo sin un complemento:
Primero, obtenga la posición del elemento. A continuación, agregue la posición de desplazamiento y la altura de la ventana gráfica juntas.
Si la combinación de la posición de desplazamiento y la altura de la ventana gráfica es mayor o igual que la posición del elemento, se encuentra en la ventana gráfica.
var element_position = $("#element").offset().top;
var scroll_position = $(window).scrollTop();
var viewport_height = $(window).height();
if((scroll_position + viewport_height) > element_position){
// Do something because the element is in the viewport
}
Compruebe si el elemento está visible en la ventana gráfica sin el complemento:
Primero determine las posiciones superior e inferior del elemento. Luego, determine la posición de la parte inferior de la ventana gráfica (relativa a la parte superior de la página) agregando la posición de desplazamiento a la altura de la ventana gráfica.
Si la posición inferior de la ventana gráfica es mayor que la posición superior del elemento Y la posición superior de la ventana gráfica es menor que la posición inferior del elemento, el elemento se encuentra en la ventana gráfica (al menos parcialmente). En términos más simples, cuando cualquier parte del elemento se encuentra entre los límites superior e inferior de su ventana gráfica, el elemento es visible en su pantalla.
Ahora puede escribir una instrucción if / else, donde la instrucción if solo se ejecuta cuando se cumple la condición anterior.
El siguiente código ejecuta lo que se explicó anteriormente:
//this function runs every time you are scrolling
$(window).scroll(function() {
var top_of_element = $("#element").offset().top;
var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
var top_of_screen = $(window).scrollTop();
if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
// The element is visible, do something
}
else {
// The element is not visible, do something else
}
});
Esta respuesta es un resumen de lo que Chris Bier y Andy estaban discutiendo a continuación. Espero que ayude a cualquier otra persona que se encuentre con esta pregunta mientras hace una investigación como yo. También utilicé una respuesta a la siguiente pregunta para formular mi respuesta: Mostrar div cuando la posición de desplazamiento .
var visible = $(".media").visible();