JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<header>
<h1>Create a Floating Menu with jQuery</h1>
</header>
<nav>
<div id="floatMenu">
<h3>Floating Menu</h3>
<ul>
    <li><a onclick="return false;" href="#">Menu Item 1</a></li>
    <li><a onclick="return false;" href="#">Menu Item 2</a></li>
    <li><a onclick="return false;" href="#">Menu Item 3</a></li>
    <li><a onclick="return false;" href="#">Menu Item 4</a></li>
    <li><a onclick="return false;" href="#">Menu Item 5</a></li>
    <li><a onclick="return false;" href="#">Menu Item 6</a></li>
    <li><a onclick="return false;" href="#">Menu Item 7</a></li>
    <li><a onclick="return false;" href="#">Menu Item 8</a></li>
</ul>
</div>
</nav>
<article>
<h2>See the floating menu?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec lorem sit amet metus pulvinar condimentum ornare ut nulla. Donec nulla libero, placerat eget elementum id, pellentesque nec nulla. Donec iaculis luctus diam eget euismod. Proin sed nisl dui. Vivamus consequat viverra venenatis. Vivamus scelerisque fringilla urna, eu tempor nisi suscipit vitae. Curabitur sodales dui sit amet arcu pharetra in tincidunt enim accumsan. Phasellus enim ipsum, hendrerit id rhoncus tempor, posuere venenatis nibh. Nunc cursus tristique turpis et malesuada. In at elit pellentesque justo blandit cursus. Donec pulvinar justo in sapien auctor quis volutpat justo congue. Quisque nec ligula quis lacus rhoncus sagittis. Aenean scelerisque dui vitae ligula tempor nec tempor mauris vestibulum. In ac magna adipiscing augue lobortis rhoncus vel eget leo. Fusce eget justo nec urna euismod tincidunt. Suspendisse potenti.</p>
<p>Integer a enim lectus. Vivamus nunc sem, feugiat non malesuada vitae, consectetur ut purus. Aliquam libero velit, elementum non luctus eu, ultricies ac massa. Mauris viverra risus ac quam molestie in ultricies tortor ultrices. Nullam ipsum arcu, pharetra in laoreet eget, mollis et purus. Vivamus ut fermentum tortor. Suspendisse feugiat scelerisque leo...

CSS

body {
    font-size:13px;
    font-family: Arial, Helvetica, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
    font-weight:bold;
}
h1 {
    font-size: 2.5em;
}
h2 {
    font-size: 2em;
}
p {
    margin: .6em 0;
}
#wrapper {
    width: 50%;
    max-width: 800px;
    margin: 0 auto;
}

#floatMenu {
    position:absolute;
    top:30%;
    left:10px;
    width:135px;
    background-color:#FFF;
    margin:0;
    padding:0;
    font-size:11px;
    border-left:1px solid #ddd;
    border-right:1px solid #ddd;
}

#floatMenu h3 {
    color:white;
    font-weight:bold;
    padding:3px;
    margin:0;
    background-color:#006;
    border-bottom:1px solid #ddd;
    border-top:1px solid #ddd;
    font-size:13px;
    text-align:center;
}

#floatMenu ul {
    margin:0;
    padding:0;
    list-style:none;
}

#floatMenu ul li {
    padding-left:10px;
    background-color:#f5f5f5;
    border-bottom:1px solid #ddd;
    border-top:1px solid #ddd;
}

#floatMenu ul li a {
    text-decoration:none;
}

JavaScript

$(function() {
    function moveFloatMenu() {
        var menuOffset = menuYloc.top + $(this).scrollTop() + "px";
        $('#floatMenu').animate({
            top: menuOffset
        }, {
            duration: 500,
            queue: false
        });
    }

    menuYloc = $('#floatMenu').offset();

    $(window).scroll(moveFloatMenu);

    moveFloatMenu();
});