JSFiddle - React, Tailwind, and code Playground

by grjopa

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Fixed Side Menu</title>
    </head>
    
    <body>
        
        <div class="container">
            
            <div id="sidenav-wrap">
                
                <div id="sidenav-top">
                    <p>static top menu</p>
                </div>
                
                <div id="sidenav">
                    <p>scrolling side menu</p>
                    <ul>
                        <li><a href="#anchor">Lorem ipsum dolor</a></li>
                        <li><a href="#anchor">Lorem ipsum dolor</a></li>
                        <li><a href="#anchor">Lorem ipsum dolor</a></li>
                        <li><a href="#anchor">Lorem ipsum dolor</a></li>
                        <li><a href="#anchor">Lorem ipsum dolor</a></li>
                    </ul>
                    <br />
                    
                    <ul>
                        <li><a href="#anchor">Etiam convallis</a></li>
                        <li><a href="#anchor">Etiam convallis</a></li>
                        <li><a href="#anchor">Etiam convallis</a></li>
                    </ul>
                </div>
                
                <div id="sidenav-bottom">
                    <p>bottom menu which needs to scroll under fixed position menu</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                </div>
                
            </div>
            
            <div id="content">
                
                <h2>Opto tego, distineo luptatum</h2>
                
                <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
                
                <p>Opto tego, distineo luptatum, amet...

CSS

.container {
    width: 960px; 
    margin: 0 auto; 
    font-size: 1.2em; 
    position: relative;
}

#sidenav-wrap {
    width: 300px;
    float: left;
    position: relative;
}
#sidenav-top {
    border: 1px solid;
    margin-bottom: 10px;
}

#sidenav {
    border: 1px solid;
    width: 298px;
}

#sidenav-bottom {
    border: 1px solid;
    margin-top: 10px;
    position: scroll;
}


#content {
    float: right;
    width: 620px;
    padding: 0 10px 10px;
    border: 1px solid;
}

JavaScript

$(document).ready(function() {

    var sideNav = $('#sidenav'),
        sideNavPos = sideNav.offset(),
        sideNavHeight = sideNav.height(),
        winHeight = $(window).height(),
        didScroll = false;

    $(window).scroll(function() {
        didScroll = true;
    });

    setInterval(function() {

        if (didScroll) {
            didScroll = false;

            if ($(this).scrollTop() > sideNavPos.top && sideNavHeight < winHeight) {

                if (!(sideNav.css('position') == 'fixed')) {
                    sideNav.css({
                        'position': 'fixed',
                        'top': '0'
                    });
                }
            }
            else {

                if (sideNav.css('position') == 'fixed') {
                    sideNav.css({
                        'position': 'relative'
                    });
                }
            }
        }

    }, 250);

});