JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<div id="wrapper">
    <div id="sidebar">
        <ul id="navigation">
            <li><a id="navfirst" class="current" href="#">First Section</a></li>
            <li><a id="navsecond" href="#">Second Section</a></li>
            <li><a id="navthird" href="#">Third Section</a></li>
            <li><a  id="navtop"href="#">Back to top</a></li>
        </ul>
    </div>
    <div id="content">
        <div class="section" id="first">
            <!--  content goes here -->
        </div>
        <div class="section" id="second">
            <!--  content goes here -->
        </div>
        <div class="section" id="third">
            <!--  content goes here -->
        </div>
    </div>
</div>

CSS

#wrapper {
    width: 850px;
    margin: 50px auto;
    overflow: hidden;
}

#sidebar ul {
position: fixed;
    width: 180px;
}

#content {
float: right;
width: 630px;
padding: 0 20px 20px;
}

JavaScript

// distance to the window
var navOffset     = 15;
// navigation is aligned to #content
var minTop = $('#content').offset().top,
    maxTop = $('#content').height()+minTop-$('#navigation').height();
// place navigation
var currentScroll = $(window).scrollTop();
$('#navigation').css({'top' : minTop});
// align navigation after loading
if( currentScroll &gt; minTop &amp;&amp; currentScroll &lt; maxTop ) {
    // while scrolling though the content
    $('#navigation').css({'top' : navOffset+'px'});
}
if( currentScroll &lt;= minTop ) {
    // adjust navigation top to content top
    $('#navigation').css({'top' : minTop-currentScroll});
}
if( currentScroll &gt;= maxTop ) {
    // end of content
    $('#navigation').css({'top' : maxTop-currentScroll});
}