JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<ul id="floatnav"> <a href="#cinerama" class="bullit"></a>
 <a href="#magicalgems" class="bullit"></a>
 <a href="#deltalloyd" class="bullit"></a>
 <a href="#ezchef" class="bullit"></a>

</ul>
<div id="main">
    <div id="cinerama">cinerama</div>
    <div id="magicalgems">magicalgems</div>
    <div id="deltalloyd">deltalloyd</div>
    <div id="ezchef">ezchef</div>
</div>

CSS

#floatnav {
    position: fixed;
    right: -50px;
    top: 50%;
    width: 8em;
    margin-top: -2.5em;
}
.bullit {
    background-color:#242424;
    -moz-border-radius:17px;
    -webkit-border-radius:17px;
    border-radius:17px;
    border:0px solid #000000;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:12px;
    padding:5px 5px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    box-shadow: inset 1px 4px 9px -6px;
    box-shadow: 2px 2px 1px #888888;
}
.bullit:hover {
    background-color:#ebebeb;
    box-shadow: inset 1px 4px 9px -6px;
}
.bullit.active {
    position:relative;
    top:1px;
    background:orange;
}

#main > div:nth-child(2n+1) {
    background: #eee;
}

#main > div {height: 600px;}

JavaScript

jQuery(function ($) {
    $(window).on('scroll', function () {
        var positions = [],
            elements = [],
            scrolltop = $(this).scrollTop()
        ;
        $('> div', '#main').each(function() {
             var pos = Math.abs($(this).position().top - scrolltop);
             positions.push(pos);
             elements[ pos ] = this.id;
        });
    
        var array_min = Math.min.apply(null, positions);
        var current_element_id = elements[ array_min ];
        console.log(current_element_id);
    
        $('a', '#floatnav').removeClass('active');
        $('a[href="#'+ current_element_id +'"]', '#floatnav').addClass('active');
    });
});