Edit in JSFiddle

<div id="wrapper" class="skrollable skrollable-between" data-start="background-position: 50% 0px;" data-90p="background-position: 50% 200px;">

    <div data-0="background-color: #FFF000;" data-500="background-color: rgba(100,60,255,1);" class="top skrollable skrollable-between" style="background-color: rgb(0, 0, 255);">Watch My Background Change Color</div>

 
</div>

#wrapper{
    background-image: url('http://freetopwallpaper.com/wp-content/gallery/hd4/landscape-hd-wallpaper-free-113.jpg');
    width: 100%;
    height: 100%;
    color: #fff;
    background-attachment: fixed;
    background-size: cover;
}
.top{
    position: fixed;
    top:0;
    width: 100%;
    padding: 10px;
}

body{
    padding: 0px;
    margin: 0px;
}

/*! skrollr-colors 1.0.0 (2013-09-05) | Fez Vrasta - https://github.com/FezVrasta/skrollr-colors | Free to use under terms of MIT license */
(function () {
    function n(a) {
        var b = a.replace("rgb(", "", a).replace("rgba(", "", a).replace(")", "", a).split(",");
        a = 4 == b.length ? b[3] : 1;
        var f = b[0],
            c = b[1],
            b = b[2],
            f = f / 255,
            c = c / 255,
            b = b / 255,
            h = Math.max(f, c, b),
            d = Math.min(f, c, b),
            g, e = (h + d) / 2;
        if (h == d) g = d = 0;
        else {
            var k = h - d,
                d = 0.5 < e ? k / (2 - h - d) : k / (h + d);
            switch (h) {
                case f:
                    g = (c - b) / k + (c < b ? 6 : 0);
                    break;
                case c:
                    g = (b - f) / k + 2;
                    break;
                case b:
                    g = (f - c) / k + 4
            }
            g /= 6
        }
        return "hsla(" + Math.floor(360 * g) + "," + Math.floor(100 * d) + "%," + Math.floor(100 * e) + "%," + a + ")"
    }
    function q(a) {
        return a.replace(")", ",1)").replace("hsl",
            "hsla")
    }
    function r(a) {
        a = /#([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9])([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9])([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9])/g.exec(a);
        return n("rgba(" + parseInt(a[1], 16) + "," + parseInt(a[2], 16) + "," + parseInt(a[3], 16) + ",1)")
    }
    for (var p = document.getElementsByTagName("*"), m = 0; m < p.length; m++) for (var l = p[m].attributes, e = 0; e < l.length; e++) 0 === l.item(e).nodeName.indexOf("data-") && (l.item(e).nodeValue = l.item(e).nodeValue.replace(/#([a-z0-9][a-z0-9][a-z0-9][a-z0-9][a-z0-9][a-z0-9]|[a-z0-9][a-z0-9][a-z0-9])/gi,
    r).replace(/(rgb|rgba)\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(|,\s*((\d|\d.){1,3})\s*)\)/gi, n).replace(/hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3}(|%))\s*,\s*(\d{1,3}(|%))\s*\)/gi, q))
})();

// Start skrollr
var s = skrollr.init();