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值更改为动态值。

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

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

Answer 1

您无需转换颜色格式，只需使用十六进制值（或您拥有的颜色值）设置动态背景颜色，然后分别设置不透明度：

var primaryColour = "#00a850";

$(".fade-overlay").css({backgroundColor: primaryColour});
$(".fade-overlay").css({opacity: $scrollPercent});

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

1 个答案: