Dropbox网站导航栏效果

Question

I would like to recreate this transition effect from navigation bar on https://www.dropbox.com/ . (I think It looks different in English version. Just change language to any other, to see the one I mean)

The way text and logo change color when each section scrolls beneath. Is it possible to do that with just CSS or vanilla JavaScript?

While researching, I found this - https://github.com/salsita/jq-clipthru , but as I said, I'm interested in pure JS, not jQuery or other libraries. And I also found this jsfiddle http://jsfiddle.net/pq8jtm5L/ .

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

I understand how the second example works, but I don't think that's how it's done on the dropbox website. It doesn't look like it changes any inline styles in DOM, or any type of positioning on elements with js. I guess the only thing manipulated in JS by scrolling is that white "sign in" panel, receiving a class, when you scroll.

Also, I don't think it has anything to do with background-attachment property. The logo is two img tags with svg in src attributes, and all the links are just plain text.

Answer 1

You don't need JS at all (the reason you don't see any DOM state change in developer tools).
The effect is purely achieved using CSS clip

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

on an absolute, full-size navigation parent (with the same size as the wrapping page).

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