JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<header>Header</header>
<section>
    <article>
Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some contentccc Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Somcce content Some content 
    </article>
    
    <aside>
        <nav>
            <a href="#">Any link</a>
            <a href="#">Any link</a>
            <a href="#">Any link</a>
            <a href="#">Any link</a>
        </nav>
    </aside>
    
</section>
<footer>Footer</footer>

CSS

* { margin: 0px; }

header { background: red; padding: 20px; }
footer { background: blue; padding: 40px; }
section { position: relative; background: #ccc; }
article { padding: 15px; padding-right: 220px; height: 800px; text-align: justify; }
aside {
    background: yellow;
    position: absolute;
    width: 200px; height: 100%;
    top: 0px; right: 0px;
}


aside nav { padding: 15px; }
aside nav a { display: block; padding: 5px; }
aside nav a:hover { background: #fff; }

JavaScript

$(window).scroll(function(){
    var nsc = $(document).scrollTop(); // now scroll position
    var bp1 = $('header').outerHeight(); // break point 1
    var bp2 = bp1 + $('section').outerHeight()-$(window).height(); // break point 2   
    if (nsc>bp1) {  $('aside').css('position','fixed'); }
    else { $('aside').css('position','absolute'); }
    if (nsc>bp2) { $('aside').css('top', bp2-nsc); }
    else { $('aside').css('top', '0'); }
});