CSS Adaptive Colour Slide on Nav [closed] - css

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I am trying to create some CSS that slides the background colour of the nav element based on the current area of the page that the user is on. A good example is the Dropbox home page for mobile(https://dropbox.com) I can see that they they have just created 3 separate navs with the colours but cannot figure out how they have achieved the colour swipe effect.
I have done some light CSS work in training in the past and tried to figure it out/look through the site but came up with nothing. I have also found a guide on doing something similar with horizontal scroll but nothing on vertical scroll.

Answer 1

If you take a look at their DOM, you can find a section that is repeated with different classes:
<section class="RebrandNavigation RebrandNavigation-theme__sapphire-french-vanilla">
<section class="RebrandNavigation RebrandNavigation-theme__french-vanilla">
<section class="RebrandNavigation RebrandNavigation-theme__default">
These sections have exact same div and nav inside them:
<div class="RebrandNavigation-container"><nav class="RebrandNavigation-container-content">
But there is a little difference! div and nav wrapped with section have different background colors based on section class; Because you need different background color when passing through different section:
.RebrandNavigation-theme__sapphire-french-vanilla .RebrandNavigation-container, .RebrandNavigation-theme__sapphire-french-vanilla .RebrandNavigation-container-content {
background: #0d2f81;
}
.RebrandNavigation-theme__french-vanilla .RebrandNavigation-container, .RebrandNavigation-theme__french-vanilla .RebrandNavigation-container-content {
background: #ffe7aa;
}
.RebrandNavigation-theme__default .RebrandNavigation-container, .RebrandNavigation-theme__default .RebrandNavigation-container-content {
background: #fff;
}
And then clip the wrapper of nav to specify a specific region of it to display using clip css property.
Now, let's combine these all together:
* {
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font: 14px/1.4 sans-serif;
}
.RebrandNavigation {
position: relative;
height: 100vh;
padding-top: 80px;
}
.RebrandNavigation-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
clip: rect(auto, auto, auto, auto);
pointer-events: none;
}
.RebrandNavigation-container-content {
position: fixed;
width: 100%;
top: 0;
font-size: 60px;
}
.RebrandNavigation-theme__sapphire-french-vanilla {
background: #fbb;
color: #000;
}
.RebrandNavigation-theme__french-vanilla {
background: #0bf;
color: #fff;
}
.RebrandNavigation-theme__default {
background: #bfb;
color: #000;
}
<section class="RebrandNavigation RebrandNavigation-theme__sapphire-french-vanilla">
<div class="RebrandNavigation-container">
<nav class="RebrandNavigation-container-content RebrandNavigation-theme__sapphire-french-vanilla">Dropbox Navbar</nav>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Nulla posuere sollicitudin aliquam ultrices. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Felis donec et odio pellentesque diam. Aenean et tortor at risus viverra adipiscing at in tellus. Sit amet facilisis magna etiam tempor. Pellentesque id nibh tortor id. Purus semper eget duis at tellus. Tincidunt augue interdum velit euismod. Donec enim diam vulputate ut. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Est lorem ipsum dolor sit amet consectetur. At ultrices mi tempus imperdiet.</p>
</section>
<section class="RebrandNavigation RebrandNavigation-theme__french-vanilla">
<div class="RebrandNavigation-container">
<nav class="RebrandNavigation-container-content RebrandNavigation-theme__french-vanilla">Dropbox Navbar</nav>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Nulla posuere sollicitudin aliquam ultrices. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Felis donec et odio pellentesque diam. Aenean et tortor at risus viverra adipiscing at in tellus. Sit amet facilisis magna etiam tempor. Pellentesque id nibh tortor id. Purus semper eget duis at tellus. Tincidunt augue interdum velit euismod. Donec enim diam vulputate ut. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Est lorem ipsum dolor sit amet consectetur. At ultrices mi tempus imperdiet.</p>
</section>
<section class="RebrandNavigation RebrandNavigation-theme__default">
<div class="RebrandNavigation-container">
<nav class="RebrandNavigation-container-content RebrandNavigation-theme__default">Dropbox Navbar</nav>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Nulla posuere sollicitudin aliquam ultrices. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Felis donec et odio pellentesque diam. Aenean et tortor at risus viverra adipiscing at in tellus. Sit amet facilisis magna etiam tempor. Pellentesque id nibh tortor id. Purus semper eget duis at tellus. Tincidunt augue interdum velit euismod. Donec enim diam vulputate ut. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Est lorem ipsum dolor sit amet consectetur. At ultrices mi tempus imperdiet.</p>
</section>