JSFiddle - React, Tailwind, and code Playground

by Daniel Pegues

HTML

<div class="bar">
    <div class="jump_stage" id="bar1" onclick="window.location.href='#div1'">div1</div>
    <div class="jump_stage" id="bar2" onclick="window.location.href='#div2'">div2</div>
    <div class="jump_stage" id="bar3" onclick="window.location.href='#div3'">div3</div>
    <div class="jump_stage" id="bar4" onclick="window.location.href='#div4'">div4</div>
    <div class="jump_stage" id="bar5"onclick="window.location.href='#div5'">div5</div>
</div>
</br>

<div class="main_body">
    <div id="div1" class="content">Div 1 content</div>
    <div id="div2" class="content">Div 2 content</div>
    <div id="div3" class="content">Div 3 content</div>
    <div id="div4" class="content">Div 4 content</div>
    <div id="div5" class="content">Div 5 content</div>
</div>

CSS

.content {
    width: 100%;
    height: 500px;
    margin-bottom: 10px;
    background: orange;    
}

.jump_stage
{
    float: left;
    width: 100px;
    background: blue;
    color: white;
    
}

.bar
{
    position: fixed;
}

.highlighted
{
    background: yellow;
}

JavaScript

$.fn.isOnScreen = function(){
    
    var win = $(window);
    
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();
    
    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();
    
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    
};

$( window ).scroll(function(){
        if ($('#div1').isOnScreen())
        {
            $('.jump_stage').removeClass('highlighted');
            $('#bar1').addClass('highlighted');
        }
        else if ($('#div2').isOnScreen())
        {           
            $('.jump_stage').removeClass('highlighted');
            $('#bar2').addClass('highlighted');
        }
        else if ($('#div3').isOnScreen())
        {
            $('.jump_stage').removeClass('highlighted');
            $('#bar3').addClass('highlighted');
        }
        else if ($('#div4').isOnScreen())
        {
            $('.jump_stage').removeClass('highlighted');
            $('#bar4').addClass('highlighted');
        }
        else if ($('#div5').isOnScreen())
        {  
            $('.jump_stage').removeClass('highlighted');
            $('#bar5').addClass('highlighted');
        }
});