JSFiddle - React, Tailwind, and code Playground

by Angel Ordax

HTML

<div>
    <div id="sticky">Menu <span id="current"></span></div>
    <div class="content light"></div>
    <div class="content dark"></div>
    <div class="content light"></div>
    <div class="content dark"></div>
    <div class="content light"></div>
</div>

CSS

#sticky {
    position:fixed;
    top:10px;
    left:10px;
    right:10px;
    height:50px;
}
#sticky.light {
    color:black;
}
#sticky.dark {
    color:white;
}
.content {
    width:100%;
    height:300px;
}
.content.dark {
    background:black;
}
.content.light {
    background:#f2f2f2;
}

JavaScript

var stickyOffset = $("#sticky").offset();
var $contentDivs = $(".content");
$(document).scroll(function() {
    $contentDivs.each(function(k) {
        var _thisOffset = $(this).offset();
        var _actPosition = _thisOffset.top - $(window).scrollTop();
        if (_actPosition < stickyOffset.top && _actPosition + $(this).height() > 0) {
            $("#current").html("Current div under sticky is: " + $(this).attr("class"));
            $("#sticky").removeClass("light dark").addClass($(this).hasClass("light") ? "light" : "dark");
            return false;
        }
    });
});