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);

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

 /*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;} 

 <section class="page bg-1"> <div class="nav-clip"> <nav class="nav bg-1">STACKOVERFLOW</nav> </div> <p>1 Lorem ipsum...</p> </section> <section class="page bg-2"> <div class="nav-clip"> <nav class="nav bg-2">STACKOVERFLOW</nav> </div> <p>2 Lorem ipsum...</p> </section> <section class="page bg-3"> <div class="nav-clip"> <nav class="nav bg-3">STACKOVERFLOW</nav> </div> <p>3 Lorem ipsum...</p> </section>