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>