JSFiddle - React, Tailwind, and code Playground

by aisinvon

HTML

<div id="wrapper">
    <div id="LangBar" />
    <div id="LeftFloat" />
    <div class="main" id="sb">**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:#999;
        }
        .fixed {
            position:fixed;
            top:0;
            left:0;
        }

JavaScript

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

                });
            });