使用jQuery滚动动态颜色变化答案

【问题标题】：Dynamic colour change on scroll with jQuery使用jQuery滚动动态颜色变化
【发布时间】：2015-02-08 19:29:53
【问题描述】：

当我向下滚动页面时，我有一个 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”的字段中创建的十六进制颜色值。我可以将此值作为“背景颜色”输出到 div，但想知道是否可以将其转换为 RGB 并将其插入到我已有的代码中？

任何人都可以帮助我解决如何让它发挥作用的困惑吗？感谢您提供的任何帮助。

【问题讨论】：

你想用php转换它check this link

标签： jquery wordpress advanced-custom-fields

【解决方案1】：

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

var primaryColour = "#00a850";

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

【讨论】：