JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<div id="one">
    <div id="leftCol">
        <div id="nav"></div>        
    </div>
    
    <div id="rightCol">
        <div></div>                
        <div></div>
        <div></div>
    </div>
</div>
http://stackoverflow.com/questions/6789355/jquery-menu-scroll-item-effect-example-what-is-it-called

CSS

#leftCol {
    position: relative;
    background: green;
    height: 100px;
    width: 100px;
}
#nav {
    position: fixed;
    top: 90px;
    height: 20px;
    width: 30px;
    background: red;
}

#rightCol div {
    height: 400px;
    width: 300px;
    background: yellow;
    border: 1px solid #000000;
}

JavaScript

$(window).scroll(function(){
   
    var navPos = $('#nav').position();
    
    if (navPos.top > $(window).scrollTop()) {
        $('#nav').css('top', ($(window).scrollTop()) + 'px');
    }
    
});