更改背景颜色作为页面滚动没有jQuery？

我试图让一个过渡工作，使bg颜色根据页面位置褪色成另一种颜色/即。由同级别的div引发。在这里发现了一些js（http://codepen.io/Funsella/pen/yLfAG），它在桌面上完全按照我的需要工作，但它在iPad上（无论浏览器）如何。更改背景颜色作为页面滚动没有jQuery？

有人会知道如何用CSS做这个转换吗？

我找到，但它是由一个悬停触发..

例如.. http://jsfiddle.net/L9JXG/1/

.div1 { 
    height:200px; 
    width:600px; 
    position:relative; 
    background:red; 
} 
.div1:after { 
    position:absolute; 
    width:100%; 
    height:100%; 
    content:''; 
    background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg"); 
    background-size:cover; 
    opacity:1; 
    transition: 3s; 
} 
.div1:hover:after { 
    opacity:0; 
}

来源

2015-09-27 user3358714

可能重复[更改滚动上的背景颜色]（http://stackoverflow.com/questions/16844723/change-background-color-on-scroll） –