Question

我有一个div，当我向下滚动页面时会改变颜色，从透明到不透明。此代码当前使用静态RGB值，然后根据滚动位置添加不透明度值。

$(document).ready(function () {
    $(window).scroll(function () {

        var windowHeight = $(window).height();
        var $scrollPercent = ($(document).scrollTop() / windowHeight);

        if ($(document).scrollTop() > 100) {
            $(".fade-overlay").css({backgroundColor:'rgba(0,168,80,'+$scrollPercent+')'});
        } else {
            $(".fade-overlay").css({backgroundColor:'rgba(0,168,80,'+$scrollPercent+')'});
        }
    });
});

我想将静态RGB值更改为动态值。

目前我在名为＆＃39; primary_colour＆＃39;的字段中有高级自定义字段创建的十六进制颜色值。我可以将此值输出为＆＃39; background-color＆＃39;到div但是想知道是否可以将它转换为RGB并将其插入我已经拥有的代码中？

任何人都可以帮助我解决如何让这个工作变得困难吗？感谢您提供的任何帮助。

Answer 1

下面：

if ($(document).scrollTop() > 100) {
    $(".fade-overlay").css({backgroundColor:'rgba(0,168,80,'+$scrollPercent+')'});
} else {
    $(".fade-overlay").css({backgroundColor:'rgba(0,168,80,'+$scrollPercent+')'});
}

将所有backgroundColor更改为"background-color"或首先声明变量！

使用jQuery滚动时动态颜色更改

1 个答案: