Dropbox网站导航栏效果

Question

我想从https://www.dropbox.com/上的导航栏中重新创建这个转换效果。(我认为它在英文版中看起来不一样。只要换一种语言，去看我指的语言)

文字和标志改变颜色的方式时，每一节滚动在下面。仅用CSS或普通的JavaScript就可以做到这一点吗？

在研究过程中，我发现了这个- https://github.com/salsita/jq-clipthru，但正如我所说的，我对纯JS感兴趣，而不是jQuery或其他库。我还发现了这个小玩意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>

​