mismo - mostrar y ocultar div con jquery ejemplos
Desencadenar evento jquery cuando un elemento aparece en la pantalla (7)
Quiero mostrar un efecto de fundido tan pronto como aparezca el elemento en la pantalla. Hay mucho contenido antes de este elemento, así que si desencadeno el efecto en el documento, ya que en ciertas resoluciones los visitantes no lo verán.
¿Es posible desencadenar un evento cuando, después de desplazarse hacia abajo, el elemento se vuelve visible? Estoy casi seguro de haber visto este efecto antes, pero no tengo idea de cómo lograrlo.
¡Gracias!
Creo que te refieres al complemento de jQuery "Lazy Load": http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin
Al mirar el código fuente, parece que el complemento está haciendo algo como esto:
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!'');
});
El plugin jQuery Waypoints podría ser útil. Proporciona una manera de desencadenar una acción cuando un elemento se hace visible en la pantalla.
Por ejemplo:
$(''.entry'').waypoint(function() {
alert(''The element has appeared on the screen.'');
});
Hay algunos ejemplos en el sitio del complemento .
Este funciona mejor para mí que los demás en este post: http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/
El uso es simple:
$(''#element'').visible()
Puedes ver cómo se usa este complemento para crear tu efecto aquí:
http://css-tricks.com/slide-in-as-you-scroll-down-boxes/
function viewable() {
$(".module").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
});
}
$(window).scroll(function() {
viewable();
});
$(window).blur(function() {
viewable();
});
Si usas pestañas. (por ejemplo, las pestañas de la interfaz de usuario de jQuery) debe verificar si la pestaña está activa.
$(window).scroll(function() {
if($(''#tab-1'').hasClass(''active'')) {
viewable();
}
});
Si está buscando activar un evento cuando un elemento específico o de destino se desplaza a la vista, puede hacerlo determinando los siguientes valores:
- la altura de la ventana
- El valor de la distancia de desplazamiento desde la parte superior de la ventana.
- La distancia del elemento especificado, o destino, desde la parte superior de la ventana.
Considera lo siguiente:
jQuery(window).on(''scroll'', function(){
var elValFromTop = Math.ceil(jQuery(''.target-el'').offset().top),
windowHeight = jQuery(window).height(),
windowScrollValFromTop = jQuery(this).scrollTop();
// if the sum of the window height and scroll distance from the top is greater than the target element''s distance from the top, it should be in view and the event should fire, otherwise reverse any previously applied methods
if ((windowHeight + windowScrollValFromTop) > elValFromTop) {
console.log(''element is in view!'');
jQuery(''.target-el'').addClass(''el-is-visible'');
} else {
jQuery(''.target-el'').removeClass(''el-is-visible'');
}
});
Demostración del fragmento de código:
El siguiente fragmento de código muestra un ejemplo práctico de un problema común: corregir un elemento en la ventana gráfica cuando un elemento específico se desplaza a la vista.
/* Sticky element on-scroll */
jQuery(window).on(''scroll'', function(){
var elValFromTop = Math.ceil(jQuery(''.target-el'').offset().top),
elHeight = jQuery(''.target-el'').outerHeight(),
windowHeight = jQuery(window).height(),
windowScrollValFromTop = jQuery(this).scrollTop(),
headerHeightOffset = jQuery(''.fixed-header'').outerHeight();
if ((windowHeight + windowScrollValFromTop) > elValFromTop) {
console.log(''element is in view!'');
console.log(headerHeightOffset);
jQuery(''.will-change-el'').addClass(''fixed-el'').css(''top'',headerHeightOffset).text(''fixed'');
} else {
jQuery(''.will-change-el'').removeClass(''fixed-el'').css(''top'',''0'').text(''static'');
}
// using template literals for multi-line output formatting
// comment out to observe when target element comes into view
console.log(`
how far is the target element from the top of the window: ${elValFromTop}
what is the target element''s height: ${elHeight}
what is the window height: ${windowHeight}
what is the window''s scroll value distance from the top: ${windowScrollValFromTop}
what is the sum of the window height and its offset value from the top: ${windowHeight + windowScrollValFromTop}
`);
});
/* || Reset & Defaults */
body {
margin: 0;
}
* {
box-sizing: border-box;
font-family: arial;
}
/* || General */
.target-el {
border-top: 1px solid #ccc;
}
.target-el,
.will-change-el {
transition: .7s;
text-align: center;
background: #ededed;
border-bottom: 1px solid #ccc;
}
.fixed-el {
position: fixed;
left: 0;
right: 0;
top: 0;
}
.fixed-header {
position: fixed;
left: 0;
right: 0;
top: 0;
height: 100px;
text-align: center;
background: #ededed;
border-bottom: 1px solid #ccc;
z-index: 9;
}
.buffer-el {
height: 1000px;
padding-top: 100px;
background: whitesmoke;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed-header">
<h1>Fixed Header</h1>
</div>
<div class="buffer-el">
<div class="will-change-el">static</div>
</div>
<div class="target-el">the target element</div>
NOTA:
Esto solo se aplicará a las acciones de desplazamiento en el documento y no a los elementos anidados contenidos en un panel de vista de desplazamiento.
Si quieres una solución simple y funcional:
$(''#item'').one(''appear'', function () {
// Do stuff here
});
El complemento Jquery.appear es la mejor manera de resolver este problema.