<!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>