JSFiddle - React, Tailwind, and code Playground

by adamh

HTML

<div id="nav">Navigation</div>
<div id="content">Content</div>

CSS

body {
    padding: 40px 0;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
}

#nav {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background: #444;
    color: #f0f0f0;
    top: auto;
}

#nav.fixed {
    position: fixed;
    top: 0px;
    left: 0;

}

#content {
    min-height: 1000px;
    font-size: 64px;
}

JavaScript

$.fn.sticky = function() {
    var _this = $(this);
    var _initialTop = _this.offset().top;
    var _proxy = _this.clone();
    _proxy.css({
        'position': 'fixed',
        'top': 0,
        'left': 0
    }).hide().addClass('proxy').appendTo($('body'));
    
    $(window).on('scroll', function(){
        var thisTop = parseInt(_this.offset().top);
        var scrollTop = parseInt($('body').scrollTop());

        if(!_proxy.hasClass('visible') && thisTop <= scrollTop)
        {
            _proxy.show().addClass('visible');
        }
        if(_proxy.hasClass('visible') && _initialTop > scrollTop) {
            //console.log(proxy);
            _proxy.hide().removeClass('visible');
        }
    });
};

$('#nav').sticky();