JSFiddle - React, Tailwind, and code Playground

by dragulceo

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<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>


<!--//jQuery('head').append('<script src="http://github.com/cowboy/jquery-throttle-debounce/raw/v1.1/jquery.ba-throttle-debounce.min.js"></script>');-->

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 {height: 300px;}

JavaScript

jQuery(function ($) {
    var floatNavs = $('#floatnav'),
        targetEls = $('#main > div'),
        numberEls = targetEls.length, 
        onScrollCallback,
        getVisibleElement;

    //callback called maximum once every 250 milliseconds
    onScrollCallback = $.throttle(250, function () {
        var el;
        floatNavs.find('a.active').removeClass('active');
        el = getVisibleElement();
        if(el) {
            floatNavs.find('a[href="#' + $(el).attr('id') + '"]').addClass('active');
        }
    });

    //gets the div on screen
    getVisibleElement = function () {
        var scrl = window.scrollY,
            height = jQuery(window).height(),
            elHeight,
            i;
        for (i = 0; i< numberEls; i++) {
            item = $(targetEls[i]);
            pos = item.position();
            elHeight = item.height();
            // the criteria if the element is on screen is that the topX position is greater then the scrolled pixels minus half of the element. Here you can have variations depending on the scrolled items
            if (pos.top > scrl - elHeight / 2) {
                return targetEls[i];
            }
        }
        return false;
    }

    $('#floatnav a').click(function() {
        //$('#floatnav a').removeClass('active'); /*Remove previous*/
        //$(this).addClass('active');             /*Active clicked*/
    });
    
    $(document).on('scroll', onScrollCallback);
    
});