在没有jquery的页面滚动时更改背景颜色？答案

【问题标题】：Change background colour as page scroll without jquery?在没有jquery的页面滚动时更改背景颜色？
【发布时间】：2015-12-24 15:18:10
【问题描述】：

我试图让过渡工作，以便 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;
}

【问题讨论】：

Change Background-color on scroll 的可能副本

标签： css css-transitions transition background-color fade

【解决方案1】：

你必须设置合适的断点。这是一个很好的resource 问题。

一个独立的script 在用户滚动时更改页面背景

Demo

这是脚本http://download.techstream.org/Change-Page-Background-on-Scroll.zip的下载链接（点击后开始下载）

【讨论】：