更改背景顏色作爲頁面滾動沒有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） –