JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
        <section class="first" id="one">
            <p>Section 1</p>
            <p><a href="#two" title="Down">Down</a></p>
        </section>
        <section id="two">
            <p>Section 2</p>
            <p><a href="#three" title="Down">Down</a></p>
        </section>
        <section id="three">
            <p>Section 3</p>
            <p><a href="#four" title="Down">Down</a></p>
        </section>
        <section id="four">
            <p>Section 4</p>
            <p><a href="#five" title="Down">Down</a></p>
        </section>
        <section id="five" class="last">
            <p>Section 5</p>
        </section>
        <div id="horiz">
            Horizontal bar
        </div>
    </div>

CSS

/* Micro reset */
        html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
            margin: 0;
            padding: 0;
        }
        article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 
            display:block;
        }
        body 
        {
            background: #fff;
            font-family: Arial, Helvetica, Sans-Serif;
            font-size: 20px;
            color: #ccc;
        }
        p 
        {
            margin: 0 0 20px 0;
        }
        a {
            color: #fff;
            font-size: 12px;
            text-decoration: none;    
        }    
        #container 
        {
            width: 980px;
            margin: 0 auto;
            background: #f1f1f1;
            position: relative;
        }
        section 
        {
            background: #ccc;
            color: #999;
            margin: 0;
            height: 440px;
            padding: 10px;
            position: relative;
        }
        section:nth-child(even)
        {
            background: #999;
            color: #ccc;    
        }
        
        section.last 
        {
            margin-bottom: 270px;
        }
        section.active 
        {
            background: #f00;
        }
        #horiz 
        {
            height: 263px;
            opacity: 0.9;
            position: absolute;
            top: 198px;
            left: 0;
            width: 980px;
            background: #00f;
        }
        body.rel header 
        {
            position: relative;
        }
       ...

JavaScript

var sections = []; //global array of section offsetTops for the page.

            jQuery.fn.borderScroll = function (currentPos) {
                var currentBubble = 1; //Init the current bubble var.

                if ($('.active').length > 0) {
                    currentBubble = $('.active').offsetTop;
                }
                else {
                    $('section').first().addClass('active');
                }

                function closestSection() {
                    yPos = currentPos;
                    var checks = [];

                    $.each(sections, function () {
                        checks.push(Math.abs(this - yPos));
                    })

                    min = Math.min.apply(Math, checks);

                    return $.inArray(min, checks);
                }

                var closestArrPos = closestSection();
                var closest = sections[closestArrPos];

                function changeSection() {
                    $('.active').removeClass('active');
                    var currentlyActive = $('section').eq(closestArrPos);
                    currentlyActive.addClass('active');
                    $("#horiz").animate({"top" : currentlyActive[0].offsetTop + currentlyActive.height()}, "fast");
                }
                if (closest != currentBubble) {
                    changeSection();
                }

            };

            $(document).ready(function () {

                $('section').each(function () {
                    sections.push(this.offsetTop);
                });

                $(window).scroll(function () {
                    $('#horiz')
                        .stop()
                        //.animate({ "marginTop": ($('.active').scrollTop()) + "px" }, "fast")
                        .borderScroll($(this).scrollTop());
                });

            });