具有 RGBA 颜色的渐变滚动?

Gradient scroll with RGBA-color?

我正在尝试弄清楚如何将 RGBA 值发送到 DOM 使用我的 "Gradient scroll-box" 滚动时。我知道 RGBA 是 HTML5。但是为什么我不能在滚动时将新值作为 rgba 发送到我的标记中?我希望 alpha 始终为 0.5...有什么想法吗?

HTML

<body>
    <div>Fancy Gradient scroll</div>
</body>

CSS

body {
    background-color: rgba(57, 166, 221, 0.5);
    height: 5000px;
}
div {
    color: #fff;
    text-transform: uppercase;
    position: fixed;
    font-family: Arial, sans-serif;
    font-size: 40px;
    padding: 15px;
}

JS

$(function gradientScrollBox() {
    var scroll_pos = 0;
    var animation_begin_pos = 0;
    var animation_end_pos = 5000;
    var beginning_color = new $.Color("rgba(57, 166, 221, 0.5)");
    var ending_color = new $.Color("rgba(135, 200, 10, 0.5)");
    $(document).scroll(function () {
        scroll_pos = $(this).scrollTop();
        if (scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos) {
            // Calculate rgb-value depending on start and end-color.
            var percentScrolled = scroll_pos / (animation_end_pos - animation_begin_pos);
            var newRed = beginning_color.red() + ((ending_color.red() - beginning_color.red()) * percentScrolled);
            var newGreen = beginning_color.green() + ((ending_color.green() - beginning_color.green()) * percentScrolled);
            var newBlue = beginning_color.blue() + ((ending_color.blue() - beginning_color.blue()) * percentScrolled);
            var newColor = new $.Color(newRed, newGreen, newBlue);

            $("body").animate({ backgroundColor: newColor }, 0);
        } else if (scroll_pos > animation_end_pos) {
            $("body").animate({ backgroundColor: ending_color }, 0);
        } else if (scroll_pos < animation_begin_pos) {
            $("body").animate({ backgroundColor: beginning_color }, 0);
        }
    });
});

这是我的 fiddle

正如您在我的 fiddle 中看到的那样,我在样式表中给出的颜色设置为 rgba(57, ... 0.5);但是,一旦我开始滚动,该值就会变为仅 rgb,并且 alpha 不再存在。任何帮助都会很好!

使用 jQuery,您可以在文档滚动时触发 class 更改,并根据 CSS 中的 class 更改颜色,如下所示:

演示

    jQuery :

    $(document).ready(function () {
        $(window).scroll(function(){
            $('.sticky-nav').addClass('scrolled');
        });
    });

CSS :

.sticky-nav.scrolled{
    background: gold;
}

通过添加一个值为 alpha 的变量解决了我自己的问题。

$(function gradientScrollBox() {
    var scroll_pos = 0;
    var animation_begin_pos = 0;
    var animation_end_pos = 5000;
    var beginning_color = new $.Color("rgba(57, 166, 221, 0.5)");
    var ending_color = new $.Color("rgba(135, 200, 10, 0.5)");
    $(document).scroll(function () {
        scroll_pos = $(this).scrollTop();
        if (scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos) {
            // Calculate rgb-value depending on start and end-color.
            var percentScrolled = scroll_pos / (animation_end_pos - animation_begin_pos);
            var newRed = beginning_color.red() + ((ending_color.red() - beginning_color.red()) * percentScrolled);
            var newGreen = beginning_color.green() + ((ending_color.green() - beginning_color.green()) * percentScrolled);
            var newBlue = beginning_color.blue() + ((ending_color.blue() - beginning_color.blue()) * percentScrolled);
            var newColor = new $.Color(newRed, newGreen, newBlue);

            $("body").animate({ backgroundColor: newColor }, 0);
        } else if (scroll_pos > animation_end_pos) {
            $("body").animate({ backgroundColor: ending_color }, 0);
        } else if (scroll_pos < animation_begin_pos) {
            $("body").animate({ backgroundColor: beginning_color }, 0);
        }
    });
});

这样做:var alpha = 0.5;

并放在这里var newColor = new $.Color(newRed, newGreen, newBlue, alpha);