JSFiddle - React, Tailwind, and code Playground

by Joe Mottershaw

HTML

<div id="left">
    
    <div id="sidebar">
        Navigation<br />
        &nbsp;-&nbsp;<a href="#1" class="scroll">Link One</a><br />
        &nbsp;-&nbsp;<a href="#2" class="scroll">Link Two</a><br />
        &nbsp;-&nbsp;<a href="#3" class="scroll">Link Three</a>
    </div>
    
</div>

<div id="right"></div>

<div id="clear"></div>

CSS

body {
    padding: 20px
}

#sidebar {
    position: relative;
    padding: 20px
}

#left {
    width: 120px;
    height: 400px;
    border: 1px solid #000;
    float: left;
}

#right {
    width: 300px;
    height: 800px;
    border: 1px solid #000;
    float: left;
}

#clear {
    clear: both;
}

JavaScript

$(function() {

    var $sidebar = $("#sidebar"),
        $window = $(window),
        offset = $sidebar.offset(),
        topPadding = 20;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {

            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });

        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }


    });

});