JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="LangBar" />
    <div id="LeftFloat" />
    <div class="main" id="">**this is the CONTAINER (SCROLLABLE DIV)**
        <div id="header">**this is the HEADER (DIV)**</div>
        <div id="menu">**this is the MENU (DIV)**</div>
        <div class="section">**this is the CONTENT (DIV)**</div>
        <div id="footer" />
    </div>
    <div id="RightFloat" />
</div>

CSS

.section {
            height:1000px;
    background:#ccc;
        }
        .main{
            height: 600px;
            overflow: auto;
        }
        .fixed {
            position:fixed;
            top:0;
            left:50%;
        }

JavaScript

var $menu = $('#menu'),
    menuTop = $menu.offset().top;
$('#sb').scroll(function() {
    var scrollTop = $('#sb').scrollTop();
    if (scrollTop > menuTop) {
        $menu.addClass('fixed');
    } else {
        $menu.removeClass('fixed');
    }
    
});