Dropbox网站导航栏效果

Question

我想从https://www.dropbox.com/上的导航栏中重新创建此过渡效果。（我认为英语版本看起来有所不同。只需将语言更改为其他语言，就可以看到我的意思。）

每个部分在下方滚动时，文本和徽标更改颜色的方式。仅使用CSS或原始JavaScript就能做到吗？

在研究时，我发现了这个-https://github.com/salsita/jq-clipthru，但是正如我所说，我对纯JS感兴趣，而不是jQuery或其他库。而且我还找到了这个jsfiddle http://jsfiddle.net/pq8jtm5L/。

$(window).scroll(function() {
  $("section div").each(function() {
    $(this).css('margin-top', $(window).scrollTop() - $(this).parent().position().top)
  });
});

我了解第二个示例的工作原理，但是我不认为这是在Dropbox网站上完成的。看起来它不会更改DOM中的任何内联样式，或使用js更改元素上的任何类型的定位。我猜想在JS中通过滚动操作的唯一事情就是滚动时白色的“登录”面板接收到一个类。

另外，我认为这与背景附件属性无关。徽标是src属性中带有svg的两个img标签，所有链接均为纯文本。

Answer 1

您完全不需要JS（原因是您在开发人员工具中看不到任何DOM状态更改）。
使用CSS完全可以达到效果clip

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

在绝对大小的导航父级上（与包装页面的尺寸相同）。

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

/*QuickReset*/
*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}

.page {
  position: relative;
  height: 100vh;
  padding-top: 80px; /* prevent page text go underneath nav */
}

.nav-clip { /* size as parent .page, but act as nav clipper */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  clip: rect(auto, auto, auto, auto); /* the magic */
  pointer-events: none; /* Allow pointer events to pass-trough*/
}

.nav {
  position: fixed;
  width: 100%;
  top: 0;
  font-size: 60px;
}

/* COLORS */
.bg-1 {background: #fbb; color: #000;}
.bg-2 {background: #0bf; color: #fff;}
.bg-3 {background: #bfb; color: #000;}