JSFiddle - React, Tailwind, and code Playground

by gunderson

HTML

<div id="main">
    <section data-color="transparent">Section 0</section>
    <section data-color="#f60000">Section 1</section>
    <section data-color="#00f600">Section 2</section>
    <section data-color="#0000f6">Section 3</section>
    <section data-color="#ff9966">Section 4</section>
    <section data-color="#66ff99">Section 5</section>
    <section data-color="#9966ff">Section 6</section>
    <section data-color="#6699ff">Section 7</section>
</div>
<nav></nav>

CSS

html,body {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}

section{
    height: 220px;
}

nav {
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 20px;
    border: 1px solid #888;
}

JavaScript

var $window = $(window), $nav = $('nav'), $sections = $('section')

$window.on("scroll", onScroll);

function onScroll(e){
    $sections.each(function(){
        var $section = $(this);
        if ($section.offset().top - $window.scrollTop() < 0){
            $nav.css('backgroundColor', $section.data('color'));
        }
    })
}