JSFiddle - React, Tailwind, and code Playground

by dke358

HTML

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                    function isScrolledTo(elem) {
                        var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
                        var docViewBottom = docViewTop + $(window).height();
             
                        var elemTop = $(elem).offset().top; //num of pixels above the elem
                        var elemBottom = elemTop + $(elem).height();
             
                        return ((elemTop <= docViewTop));
                    }
             
                    var leftNav = $('#leftNav');
                    var sticky = $('#sticky');
                    
                    $(window).scroll(function() {
                        if(isScrolledTo(sticky)) {
                            sticky.css('position','fixed');
                            sticky.css('top','0px');
                        } 
                        var stopHeight = leftNav.offset().top + leftNav.height();
                        if ( stopHeight > sticky.offset().top) {
                            sticky.css('position','absolute');
                            sticky.css('top',stopHeight);
                        }
                    });
                });
        </script>
<div id="sidebar">
            <div id="leftNav">
<div id="sideNav" class="product-sidebar  bg-snow">
            <ul class="navList">
                <li class="top-item"><a href="/content/marketing-cloud/en_us/home/product-overview/email-studio/overview.html">Overview</a>
                    <ul class="sub-items">
                        <li><a href="/content/marketing-cloud/en_us/home/product-overview/email-studio/overview/create-content.html">Create Content</a></li>                    
                        <li><a...

CSS

#content{float:right;}