Question

我正在试图弄清楚如何使用我的“渐变滚动框”在滚动时将RGBA值发送到DOM中。我认为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

正如你在我的小提琴中看到的那样，我在样式表中给出的颜色设置为rgba（57，... 0.5）;但是一旦我开始滚动，值就会变为rgb，并且alpha不再存在。任何帮助都会很好！

Answer 1

使用jQuery，您可以在文档滚动中触发类更改，并根据CSS中的该类更改颜色，如下所示：

样本

    jQuery :

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

CSS :

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

Answer 2

通过添加具有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);

RGBA颜色的渐变滚动？

2 个答案: