JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigator">Scroll down to change color</div>

<ul id="posts">
    <li id="photo">photo section</li>
    <li id="quote">quote section</li>
</ul>

CSS

html,body {
    padding:0;
    margin:0;
    clip: auto;
    overflow: hidden;
}

#navigator {
    text-align: center;
    background: green;
    color: white;
    position: absolute;
    top: 150px;
    right: 50px;
    overflow: hidden;
    width: 60px;
    height: 250px;
}
#posts {
    position:absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow: auto;
}
#photo,#quote {
    margin-top: 800px;
    height: 300px;
}

JavaScript

var $nav = $('#navigator');
var $photo = $('#photo');
var $quote = $('#quote');
var $posts = $('#posts');
var top = $posts.offset().top;
var bottom = top + $posts.height();

$posts.scroll(function() {
    if($quote.offset().top < bottom) {
        $nav.css('backgroundColor', 'red');
    } else if ($photo.offset().top < bottom) {
        $nav.css('backgroundColor', 'blue');
    } else {
        $nav.css('backgroundColor', 'green');
    }
});