JSFiddle - React, Tailwind, and code Playground

by James Elmour

HTML

<div id="scrollerbar">
    <li id="1read">Reading 1</li>
    <li id="2read">Reading 2</li>
    <li id="3read">Reading 3</li>
    <li id="4read">Reading 4</li>
</div>
<div style="height: 1600px">
    <div id="1" style="height: 400px; background-color: red;"></div>
    <div id="2" style="height: 400px; background-color: green;"></div>
    <div id="3" style="height: 400px; background-color: blue;"></div>
    <div id="4" style="height: 400px; background-color: purple;"></div>
</div>

CSS

#scrollerbar{
    position: fixed;
    top: 50px;
    background-color: #AAAAFF;
    display: none;
    width: 100px;
}

.active{
    font-weight: bold;
}

JavaScript

$( window ).scroll(function() {
    $("#scrollerbar").css({"display": "block"});
    clearTimeout($.data(this, 'scrollTimeout'));
    if ($("#1").is(":hover")) {
        removeActive();
        $("#1read").addClass("active");
    }
    if ($("#2").is(":hover")) {
        removeActive();
        $("#2read").addClass("active");
        
    }
    if ($("#3").is(":hover")) {
        removeActive();
        $("#3read").addClass("active");
        
    }
    if ($("#4").is(":hover")) {
        removeActive();
        $("#4read").addClass("active");
    }
    $.data(this, 'scrollTimeout', setTimeout(function() {
        $("#scrollerbar").css({"display": "none"});        
    }, 250));
});

function removeActive(){
    $("#1read").removeClass("active");
    $("#2read").removeClass("active");
    $("#3read").removeClass("active");
    $("#4read").removeClass("active");
}