JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollerbar">
    You're reading:<br />
    <b><span id="displayaArticleName"></span></b>
</div>
<div style="height: 1600px">
    <div id="1" class="article" articletitle="Awersome article!" style="height: 400px; background-color: red;"><h1>Awesome article!</h1></div>
    <div id="2" class="article" articletitle="Cool stuff!" style="height: 400px; background-color: green;"><h1>Cool stuff!</h1></div>
    <div id="3" class="article" articletitle="Best article on the web" style="height: 400px; background-color: blue;"><h1>Best article on the web</h1></div>
    <div id="4" class="article" articletitle="It's another article..." style="height: 400px; background-color: purple;"><h1>It's another article...</h1></div>
</div>

CSS

h1{
    padding: 0;
    margin: 0;
}
#scrollerbar{
    position: fixed;
    top: 50px;
    background-color: #AAAAFF;
    display: none;
    width: 200px;
}

.active{
    font-weight: bold;
}

JavaScript

$( window ).scroll(function() {
    $("#scrollerbar").css({"display": "block"});
    clearTimeout($.data(this, 'scrollTimeout'));
    $(".article").hover(function(){
        $("#displayaArticleName").text($(this).attr("articletitle"));
    });
    $.data(this, 'scrollTimeout', setTimeout(function() {
        $("#scrollerbar").css({"display": "none"});        
    }, 250));
});