Javascript 覆盖渐变以固定网页中的网站徽标

我不知道该怎么做，也不知道它是否可能，也欢迎任何替代方案。这很难在课文中解释，但我会尽我所能让你们理解我的期望。在这里，我附上了我在我的网页上做的屏幕记录链接。我有一个白色的标志，看起来很好，彩色渐变回来

当我滚动页面时，彩色渐变向上，白色背景出现在徽标的背面。

其中一个渐变背面变为白色。 我将在这里添加代码

*{
保证金：0；
框大小：边框框；
字体系列：世纪哥特式；
}
/**身体**/
身体{
溢出-x：隐藏
}
.front 1{
填充：50px 100px；
高度：100vh；
对齐内容：居中对齐；
背景图像：线性梯度（111.37738709038058deg，rgba（43,45,78,1）1.55729166667%，rgba（225,20,139,1）101.34895833333%）；
/*线性梯度（114.50890543382422度，rgba（28,0,66,1）1.673177083333%，rgba（0235215,1）97.94270833331%）*/
背景重复：无重复；
显示：继承；
对齐项目：居中；
}
/**标题**/
.标志{
位置：固定；
top:41px；
}
梅因先生{
对齐项目：居中；
位置：固定；
浮动：对；
右：50px；
顶部：50px；
}
/**标题菜单**/
保险商实验室{
边际上限：0；
列表样式类型：无；
}
ulli{
显示：内联块；
}
ullia{
文字装饰：无；
文本阴影：#000；
边框：1px实心透明；
颜色：#b61e83；
填充：5px20px；
过渡：0.6s缓解；
}
悬停{
背景色：#b61e83；
颜色：#fff；
}
主动的，主动的{
背景色：#b61e83；
颜色：#fff；
}
/**SVG阴影**/
#顶{
位置：固定；
顶部：0px；
-webkit过滤器：投影（20px 20px 10px rgba（0,0,0,4））；
滤镜：投影（20px 20px 10px rgba（0,0,0,4））；
}
#底部{
位置：绝对位置；
底部：0px；
-webkit过滤器：阴影（-8px-8px 10px rgba（0,0,0,4））；
过滤器：阴影（-8px 10px rgba（0,0,0,4））；
}
/**主文本**/
.hometext{
位置：绝对位置；
右：25%；
最高：40%；
颜色：#fff；
宽度：500px；
}
.引用{
位置：相对位置；
证明内容：中心；
}
/**时钟css**/
.钟{
位置：绝对位置；
最高：25%；
左：18vw；
宽度：500px；
高度：500px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：url（../images/_clock.png）；
背景尺寸：封面；
边界半径：50%；
框阴影：0-25px+25px rgba（255,255,255,0.05），
插图0-25px+25px rgba（255,255,255,0.05），
0 25px 25px rgba（0,0,0,0.05），
插入0 25px 25px rgba（0,0,0,0.05）；
}
钟：以前{
内容：''；
位置：绝对位置；
宽度：25px；
高度：25px；
背景：#fff；
边界半径：50%；
z指数：1000；
}
.钟.小时，
.clock.min，
.时钟秒{
位置：绝对位置；
}
.钟.小时，
.hr{
宽度：260px；
高度：200px；
}
.clock.min，
明尼苏达州{
宽度：250px；
高度：300px；
}
.时钟秒，
博士{
宽度：330px；
高度：330px；
}
.hr，
mn先生，
博士{
显示器：flex；
证明内容：中心；
/*对齐项目：居中*/
位置：绝对位置；
边界半径：50%；
}
.hr:以前{
内容：''；
位置：绝对位置；
宽度：12px；
高度：90px；
背景：#ff105e；
z指数：10；
边界半径：6px 6px 0；
}
.mn:以前{
内容：''；
位置：绝对位置；
宽度：4px；
高度：150像素；
背景：#fff；
z指数：11；
边界半径：6px 6px 0；
}
sc:以前{
内容：''；
位置：绝对位置；
宽度：2倍；
高度：200px；
背景：#fff；
z指数：12；
边界半径：6px 6px 0；
}
/**动画背景**/
.圆圈{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
溢出：隐藏；
}
李先生{
位置：绝对位置；
显示：块；
列表样式：无；
宽度：20px；
高度：20px；
背景：rgba（255，255，255，0.2）；
动画：动画25秒线性无限；
底部：-150px；
}
李：第n个孩子（1）{
左：25%；
宽度：80px；
高度：80px；
动画延迟：0s；
}
李：第n个孩子（2）{
左：10%；
宽度：20px；
高度：20px；
动画延迟：2s；
动画持续时间：12秒；
}
李：第n个孩子（3）{
左：70%；
宽度：20px；
高度：20px；
动画延迟：4s；
}
李：第n个孩子（4）{
左：40%；
宽度：60px；
高度：60px；
动画延迟：0s；
动画持续时间：18秒；
}
李：第n个孩子（5）{
左：65%；
宽度：20px；
高度：20px；
动画延迟：0s；
}
李：第n个孩子（6）{
左：75%；
宽度：110px；
高度：110px；
动画延迟：3s；
}
李：第n个孩子（7）{
左：35%；
宽度：150px；
高度：150像素；
动画延迟：7秒；
}
李：第n个孩子（8）{
左：50%；
宽度：25px；
高度：25px；
动画延迟：15秒；
动画持续时间：45秒；
}
李：第n个孩子（9）{
左：20%；
宽度：15px；
高度：15px；
动画延迟：2s；
动画持续时间：35秒；
}
李：第n个孩子（10）{
左：85%；
宽度：150px；
高度：150像素；
动画延迟：0s；
动画持续时间：11s；
}
@关键帧设置动画{
0% {
变换：平移（0）旋转（0度）；
不透明度：1；
边界半径：0；
}
100% {
变换：translateY（-1000px）旋转（720deg）；
不透明度：0；
边界半径：100%；
}
}
/**页脚**/
页脚{
位置：绝对位置；
高度：100vh；
宽度：100%；
文本对齐：居中；
背景图像：线性梯度（111.37738709038058deg，rgba（43,45,78,1）1.55729166667%，rgba（225,20,139,1）101.34895833333%）；
颜色：#fff；
填充：20px；
z指数：-1；
}
页脚p{
填充：10px；
宽度：100%；
波西