Question

我想从https://www.dropbox.com/上的导航栏重新创建此过渡效果。（我认为它在英文版中看起来有所不同。只需将语言改为其他任何一种，看看我的意思）

当每个部分滚动到下方时，文字和徽标的颜色变化方式。只用CSS或vanilla 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>

Dropbox网站导航栏效果

1 个答案: