Esto me está dando vueltas..
La idea básica es que estamos usando $(window).scroll() y, a medida que se desplaza hacia abajo en la página, cuando un elemento está a la vista mediante el uso de offset() con scrollTop "hacer algo", entonces, cuando presiona el siguiente elemento en la parte inferior página "haz algo más".
Sin embargo, debido a que el evento de desplazamiento (probablemente el término incorrecto) se activa cada vez en la declaración condicional porque técnicamente la declaración es verdadera en cada desplazamiento, necesito que solo se active una vez, pero luego poder 'volver a activar' una vez cuando sucede el siguiente condicional.
$(window).scroll(function(){ let windowTop = $(window).scrollTop() if( windowTop > $('.element').offset().top && windowTop < $('.element2').offset().top ) { doSomething(); // want this to only fire once } else if( windowTop > $('.element2').offset().top ) { doSomething(); // want this to only fire once } }); Tenía una teoría sobre la posibilidad de establecer una variable en verdadero para que solo doSomething() una vez, pero luego, cuando está dentro de la segunda declaración condicional, no puedo deshacerlo/restablecerlo.
let fired = false; $(window).scroll(function(){ let windowTop = $(window).scrollTop() if( windowTop > $('.element').offset().top && windowTop < $('.element2').offset().top ) { if(!fired){ doSomething(); fired = true; } } else if( windowTop > $('.element2').offset().top ) { // need to somehow set fired to false again so it triggers once then sets back to true if(!fired){ doSomething(); fired = true; } } });¡Espero haber tenido sentido de alguna manera!
Considera lo siguiente.
var fire = { "element1": true, "element2": true }; $(window).scroll(function(event){ var windowTop = $(window).scrollTop(); console.log("Window Scroll Top: " + windowTop); if( fire.element1 && (windowTop > $('.element').offset().top && windowTop < $('.element2').offset().top) ) { console.log("Do Something!", $('.element').offset().top); fire.element1 = false; doSomething(); } else if( fire.element2 && (windowTop > $('.element2').offset().top) ) { console.log("Do Something!", $('.element2').offset().top); fire.element2 = false; doSomething(); } });La lógica aquí es que verifiquemos si debemos disparar el evento para cada elemento. De esta forma tenemos una condición SI más compleja. El fuego para ese elemento debe ser verdadero y la posición de desplazamiento debe haber bajado lo suficiente.
Si la parte superior del elemento es 100 , esta condición solo debe ser true una vez y solo una vez, cuando windowTop tiene un valor de 101 o superior. Ahora, si desea que se active cuando el elemento esté completamente a la vista, necesita la parte superior más la altura. Si tiene una altura de 40 px, entonces sería 140 (superior + altura).