css - 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/