JSFiddle - React, Tailwind, and code Playground

by Burkhard GS

HTML

<body>
    <div class="container">
        <div id="stickyNav_container">
            <div id="stickyNav">
                <ul>
                    <li>Menu Item</li>
                    <li>Menu Item</li>
                    <li>Menu Item</li>
                    <li>Menu Item</li>
                </ul>
            </div>
        </div>
        <div id="content">
            <h1>Inhalt</h1>
        </div>
    </div>
</body>

CSS

body {
    margin:auto;
}
.container {
    width:100%;
    height:1000px;
    position:relative;
    background:black;
}
#stickyNav_container {
    position: absolute;
    margin: 0 auto;
    top: 300px;
}
#stickyNav_container, #stickyNav {
    background:white;
    height: 60px;
    width: 300px;
}
#stickyNav ul {
    float:left;
}
#content{
    background:yellow;
}

JavaScript

$(document).ready(function () {
    $(window).bind('scroll', function () {
        var vPos = $(window).scrollTop();
        var totalH = $('#stickyNav_container').offset().top;
        var finalSize = totalH - vPos;

        console.log(finalSize);

        if (finalSize <= 0) {
            $('#stickyNav').css({
                'position': 'fixed',
                    'top': 0
            })
        } else {
            $('#stickyNav').css({
                'position': 'static'
            })
        }
    });
});