JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="fixed">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}

body{
    min-height: 1000px;
}

#fixed{
    position: fixed;   
    width: 200px;
    padding: 20px;
    left: 0;
    top: 0;
    border: 1px solid black;
    -webkit-transition: top 0.4s;
    -moz-transition: top 0.4s;
    transition: top 0.4s;
}

#fixed.sticky{  
    top: 75px;
}

JavaScript

$(window).scroll(function () {
    if($(this).scrollTop() > 150){
        $('#fixed').addClass('sticky');
    } else {
        $('#fixed').removeClass('sticky');
    }
});