<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<style>
html {
background: url("http://wallpaperscraft.com/image/mazda_white_front_view_113205_5064x3376.jpg") center / cover;
background-attachment: fixed;
height: 100vh;
}
body, .scrolling {
margin: 0;
height: 100vh;
overflow: auto;
}
nav {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
padding: 1em 1.5em;
margin: 1em;
border-radius: 70% 15% 40% 11%;
z-index: 1;
font-weight: bold;
font-size: 130%;
}
section {
height: 100vh;
position: relative;
top: 100vh;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
font: 20vh "Helvetica Neue", sans-serif;
}
section:nth-child(2n + 1), nav.white {
color: #fff;
background: #000;
mix-blend-mode: multiply;
}
section:nth-child(2n), nav.black {
color: #000;
background: #fff;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="scrolling">
<nav>☰</nav>
<section>Lorem</section>
<section>Ipsum</section>
<section>Dolor</section>
<section>Sit</section>
<section>Amet</section>
</div>
<script>
{
const nav = document.querySelector("nav");
nav.className = "black";
document.querySelector(".scrolling").addEventListener("scroll", event => {
let element = event.target;
let progress = (.5 + element.scrollTop / element.offsetHeight) | 0;
nav.className = progress % 2 ? "white" : "black";
});
};
</script>
</body>
</html>