Javascript 基于页面滚动动态更改文本颜色（作为线性渐变）

我想根据页面从顶部滚动的位置动态改变文本颜色（作为线性渐变）

window.onscroll=function(){getPosition()}

function getPosition()
{
  var scrollPos = $(window).scrollTop();
  loggy(""+scrollPos,3);
}

上面的代码给出了页面顶部的位置。我想做的是有一个函数，它会给我一种颜色，这种颜色是基于一个线性渐变的，这个渐变依赖于scrollPos值

线性梯度应该从

rgb（201,69109）

开始到

rgb（18,23,28）

，并且它必须从

scrollPos=0

到

scrollPos=1400

有办法做到这一点吗

function(scrollPos){
  var  color = f_color(scrollPos);
  return color;
}

编辑：在这里，我发现了一个将颜色从红色变为绿色的示例。但我还没有成功地将自定义颜色设置为我的颜色

$('#elm').css({color: 'rgb(' + ((100 - percent) *2.56) +',' + (percent *2.56) +',0)'})

---

（100*scrollPos）/1400

将其作为百分比

首先，您需要找到要滚动的RGB值。我假设您想要介于纯黑色和纯白色之间，灰色介于两者之间（所有三个RGB值中为0到255）

---

当然，如果你想要一些更微妙或更漂亮的东西，你可以在这样一个函数中使用这些值。

首先你需要找到你想要滚动的RGB值。我假设您想要介于纯黑色和纯白色之间，灰色介于两者之间（所有三个RGB值中为0到255）

---

当然，如果你想要一些更微妙或更漂亮的东西，你可以在像这样的函数中使用这些值。

你尝试过什么？尝试从静态生成任何线性渐变的代码开始，然后查看哪些部分可以提取并替换为动态获取其值的变量。您可能需要创建3个基于滚动位置变化的变量，并在

rgb（）

颜色中使用它们。实际上，只需在谷歌上搜索一下，就可以看到wa la@Adam Buchanan Smith，这是一种纯色，而不是从一种颜色到另一种颜色的渐变B@NPLS它的工作原理是一样的，把代码弄乱一点。你会从那里得到的。你试过什么？尝试从静态生成任何线性渐变的代码开始，然后查看哪些部分可以提取并替换为动态获取其值的变量。您可能需要创建3个基于滚动位置变化的变量，并在

rgb（）

颜色中使用它们。实际上，只需在谷歌上搜索一下，就可以看到wa la@Adam Buchanan Smith，这是一种纯色，而不是从一种颜色到另一种颜色的渐变B@NPLS它的工作原理是一样的，把代码弄乱一点。你会从那里得到的。

const text = document.querySelector('#id');
window.onscroll(function() {
    // gets your entire window height to scale to 255
    let colorVal = window.scrollHeight / (window.height / 255);

    text.style.color = "rgb(" + colorVal + "," + colorVal + "," + colorVal + ")";
}