Javascript 如何设置元素'；的背景与网页的特定部分相同

简介： 我有一个粘性头和一个线性梯度的身体

目标： 我想将标题的背景设置为与特定区域相同的背景，也就是说它最初位于顶部的位置

已尝试解决方案： 使用dev工具颜色选择器查找顶部的第一个值和标题结束处的第二个值

结果： 这很有效。 通过这种方式，头部看起来像是一个整体，是身体线性渐变的一部分。 当我向下滚动页面时，它保持其背景

问题： 如果页面的高度发生变化，主体的线性渐变将被重新计算。 因此，现在标题的背景也需要重新计算

由于我是编程新手，如果有任何建议可以帮助我动态地解决这个问题，我将不胜感激。 我想这会有帮助的

在这里，我发现了一个具有相同功能的用户

---

非常感谢你们抽出时间，伙计们

不使用CSS背景渐变，您可以创建一个z-index-1和页面大小相同的画布。在画布中，可以渲染渐变。这样做的好处是，您可以在画布上查询特定位置的颜色，这在CSS背景渐变中是不可能的。这样，每当发生调整大小或滚动事件时，您就可以更新标题的背景色

var canvas=document.getElementById（'background'）；
var ctx=canvas.getContext（'2d'）；
var header=document.getElementById（'header'）；
函数滚动（）
{
var y=window.scrollY+header.getClientRects（）[0]。高度；
var rgba=ctx.getImageData（0，y，1，1）；
header.style.backgroundColor='rgba（'+rgba.join（'，'）+'）；
}
函数绘图（）
{
变量颜色=[“红色”、“橙色”、“黄色”、“绿色”，
“蓝色”、“靛蓝”、“紫罗兰色”]；
var gradient=ctx.createLinearGradient（0,0,0，canvas.height）；
对于（变量i=0；i
正文{
高度：100雷姆；
溢出：滚动；
保证金：0；
}
帆布{
显示：块；
身高：100%；
宽度：100%；
z指数：-1；
保证金：0；
}
#标题{
位置：固定；
排名：0；
左：50%；
右：0；
身高：50%；
底边：1吨纯白；
}

标题
将渐变元素包装到标题，并给出100%的高度，然后给出标题的特定大小并隐藏溢出的内容。是否希望标题具有纯色背景色，并根据滚动位置进行更改？听起来很有意思。