Javascript Dropbox网站导航栏效果

我想从导航栏上重新创建这个过渡效果。（我觉得它的英文版看起来不一样。只要把语言换成其他任何一种，看看我的意思）

当每个部分在下面滚动时，文本和徽标改变颜色的方式。 仅仅使用CSS或香草JavaScript就可以做到这一点吗

在研究过程中，我发现了这个-，但正如我所说，我对纯JS感兴趣，而不是jQuery或其他库。我还发现了这个JSFIDLE

我理解第二个例子是如何工作的，但我不认为dropbox网站就是这样做的。它看起来不会改变DOM中的任何内联样式，也不会改变js元素上的任何类型的定位。我猜在JS中通过滚动操作的唯一东西是白色的“登录”面板，当你滚动时接收一个类

另外，我认为它与背景附件属性没有任何关系。logo是两个img标签，在src属性中带有svg，所有链接都是纯文本

您根本不需要JS（这是您在开发人员工具中看不到任何DOM状态更改的原因）。
该效果纯粹是使用CSS

clip

clip: rect(auto, auto, auto, auto);

在绝对、全尺寸导航父项上（与包装页大小相同）

/*快速重置*/
*{边距：0；框大小：边框框；}html，正文{高度：100%；字体：14px/1.4无衬线；}
.第页{
位置：相对位置；
高度：100vh；
顶部填充：80px；/*防止页面文本位于导航下方*/
}
.nav clip{/*大小作为父.page，但充当nav clipper*/
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
剪辑：rect（自动，自动，自动）；/*魔术*/
指针事件：无；/*允许指针事件通过*/
}
.导航{
位置：固定；
宽度：100%；
排名：0；
字体大小：60px；
}
/*颜色*/
.bg-1{背景：#fbb；颜色：#000；}
.bg-2{背景：#0bf；颜色：#fff；}
.bg-3{背景：bfb；颜色：000；}

堆栈溢出
1洛雷姆ipsum

堆栈溢出
第2页

堆栈溢出
同侧三棱

clip: rect(auto, auto, auto, auto);