CSS3颜色过渡

Question

我想将此过渡效果添加到我的网站：http://www.formuswithlove.se/（当您到达下一个锚点时，背景颜色会发生变化）

我该怎么做？

提前致谢

Answer 1

我不认为这可以通过纯CSS完成，但您可以检查window.scroll事件的滚动量并更新正文（或容器元素）的背景颜色。您可能也希望进行转换。

window.addEventListener('scroll', function () {
    if (document.body.scrollTop > 500) {
        document.body.style.backgroundColor = "red"
    }
    else {
        document.body.style.backgroundColor = "transparent"
    }
});

http://jsfiddle.net/GnX8A/1/