[SOLUCIONADO] Detectar sección páginas con javascript

jorgecanto · #1 (**permalink**) 09/01/2016, 04:36

Hola!

Estoy creando una página en la cual los elementos deben interactuar conforme el usuario va realizando scroll. Había pensado en hacer que el javascript detecte cuando me encuentro en una sección y aplicar los estilos css en esa parte del scroll.

Por ejemplo, si tengo lo siguiente:

Código HTML:

Ver original<div id="seccion1">
   <img src="" id="imagen1">
</div>
<div id="seccion2">
   <img src="" id="imagen2">
</div>
<div id="seccion3">
   <img src="" id="imagen3">
</div>
<div id="seccion4">
   <img src="" id="imagen4">
</div>

Al llegar a la seccion3, por ejemplo, añada una clase a la imagen3 con un método addClass. Y así con cada sección.

¿Cómo debería ser el javascript que necesito?

IsaBelM · #2 (**permalink**) 09/01/2016, 09:02

prueba con este

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.seccion {
height: 10rem;
transition: background-color 1.3s;
}

.nuevoColor {
background-color: rgb(0, 189, 228);
}
</style>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {

function posicionAbsolutaElemento(elem) {

if (!elem) return { top : 0, left : 0 };

var x = 0;
var y = 0;

while (elem.offsetParent) {

x += elem.offsetLeft;
y += elem.offsetTop;
elem = elem.offsetParent;
}

return {top : y, left : x};
}

function posicionScroll() {

var scrollHorizontal = window.pageXOffset;
var scrollVertical = window.pageYOffset;

return {topScroll : scrollVertical, leftScroll : scrollHorizontal};
}

function obtenerAltoNavegador() {

return window.innerHeight;

}

var obj = [];

[].map.call(document.querySelectorAll('.seccion'), function(v, i, arr) {

var pos = ((posicionAbsolutaElemento(arr[i]).top + arr[i].offsetHeight ) - obtenerAltoNavegador()),
scroll;

obj.push({posicion : pos, elemento : arr[i]});
});

document.addEventListener('scroll', scroll = function() {

if (posicionScroll().topScroll > obj[0].posicion) {

obj[0].elemento.classList.add('nuevoColor');

obj.shift(0);

if(!obj.length) document.removeEventListener('scroll', scroll, false);

}

}, false);

}, false);
</script>
</head>
<body>

<div style="height: 900px">haz scroll para ver el efecto</div>

<div class="seccion"></div>

<div style="height: 900px">continua haciendo scroll</div>

<div class="seccion"></div>

<div style="height: 500px">continua haciendo scroll</div>

<div class="seccion"></div>

<div style="height: 500px">aunque se continúe haciendo scroll up/down, no se vuelve a producir el efecto</div>

</body>
</html>

jorgecanto · #3 (**permalink**) 30/01/2016, 06:59

Gracias IsaBelM!!

Al final un amigo me recomendó una librería llamada Scroll Magic, lo cual me permite hacer muchas cosas con el scroll.

Dejo el link por si a alguien le interesa -> http://scrollmagic.io/
GitHub -> https://github.com/janpaepke/ScrollMagic