Change background colour as page scroll without jq

问题:

Im trying to get a transition working so that the bg colour fades into another colour depending on position of page/i.e. triggered by divs with same class. Found some js here (http://codepen.io/Funsella/pen/yLfAG) which works exactly how I want on desktop, but it breaks on iPad (no matter the browser).

Would anybody know how to do this transition with CSS?

I found but it's triggered by a hover..

For example.. 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;
}

回答1:

You have to set suitable break points. Here is a great resource for the question.

A stand alone script to Change Page Background on User Scroll

Demo

This is the download link for the script http://download.techstream.org/Change-Page-Background-on-Scroll.zip (Download will start when you click on it)