改变背景颜色作为页面滚动没有jquery

Question

我试图得到一个过渡工作，使bg颜色褪色成另一种颜色取决于页面的位置/即。由相同职业的div触发。我在这里找到了一些js (http://codepen.io/Funsella/pen/yLfAG)，它在桌面上的工作方式完全符合我的要求，但在iPad上却坏了(无论浏览器如何)。

有人知道如何用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;
}

Answer 1

必须设置合适的断点。这里有一个很好的资源来回答这个问题。

一个独立的脚本来改变用户滚动页的背景

演示

这是脚本的下载链接http://download.techstream.org/Change-Page-Background-on-Scroll.zip(当你点击它时下载将开始)