JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="top"></div><div id="line"></div>

<div id="navigation">
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
    </ul>
</div>

CSS

body {
    height: 2222px;
    position: relative;
}

#top {
    width: 100%;
    height: 65px;
    background: #666;
}
#line {
    height: 100%;
    width: 0px;
    border-left: 8px dashed red;
    position: absolute;
    z-index: -1;
    top: 0px;
    right: 0px;
}


#navigation {
    float: left;
    width: 100%;
    background: #222;
}

#navigation.fixed {
    position: fixed;
    margin-top: 0px;
    top: 0px;
}

#navigation li { float: left; padding: 20px; }

JavaScript

var myElement = $('#navigation'),
    myClass = 'fixed';

//  ****************************************************************************
//   Don't touch anything beyond this point, unless you know what you're doing.
//  ****************************************************************************
var win = $(window),
    myElementH = myElement.outerHeight(),
    offsetTop = myElement.offset().top,
    active = 0;

    // The variable 'active' prevents the if statements from firing when there is no need to.
    // I.e. When the class is already added or removed.

win.on("scroll resize", function() {

    // Window height and scroll distance are stored inside the events
    // so that they are updated as these events are triggered.
    var winH = win.height(),
        scrollTop = $(document).scrollTop();
    
    if ( active === 0 && scrollTop >= offsetTop && winH > myElementH ) {
        myElement.addClass( myClass );
        active = 1;
    }
    else if ( active === 1 && scrollTop < offsetTop || active === 1 && winH < myElementH ) {
        myElement.removeClass( myClass );
        active = 0;
    }
    
});