JSFiddle - React, Tailwind, and code Playground

by rsadwick

HTML

<html>
    <body>
        <div id="navigation">
            <h4>Navigation Links</h4>
            <ul>
                <li>Test one</li>
                <li>Test one</li>
                <li>Test one</li>
                <li>Test one</li>
                <li>Test one</li>
            </ul>
        </div> 
        
        <div id="content">
            <p>Content</p>
        </div>
        
    </body>
    
</html>

CSS

#navigation{
    position: absolute;
    top: 0; 
    right: 5px; 
    z-index: 2;
    text-align: right;
    background-color: #9cb27c;
}

#content
{
    height: 2000px;
    background-color: #768f52;
}

JavaScript

$(function() {
    $(window).scroll(function() {
        $("#navigation").stop().animate({
            top: $(document).scrollTop()
        }, {
            duration: 500,
            easing: 'easeOutBack'
        });
    });
});