JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<script src="https://raw.github.com/imakewebthings/jquery-waypoints/master/waypoints.js"></script>
<button id="toggler">Show/hide</button>
<div class="cont">
    <div class="sticky">Sticky toolbar</div>
    <textarea></textarea>
    <div class="bottompoint"></div>
</div>
<div class="cont" style="display:none" id="toggle">
    <div class="sticky">Sticky toolbar 2</div>
    <textarea></textarea>
    <div class="bottompoint"></div>
</div>

CSS

body {
    padding: 10px;
    height: 2000px;
}
.cont {
    
    box-sizing: border-box;
    width: 50%;
    float: left;
    padding: 30px;
    border: 1px solid #999;
    position: relative;
    
    z-index: 2;
    overflow: hidden;
}

textarea {
    width: 100%;
    height: 40px;
}

.bottompoint {
    height: 10px;
    width: 100px;
    background-color: #bbb;
}

.sticky {
    background-color: #eee;
    padding: 30px;
}

.sticky.fixed {
    color: blue;
    position: fixed;
    z-index: 1;
    top: 0;
}

JavaScript

var Udir = {};


Udir.stickyToolbar = function(cont, tb, bp, opt) {
    
    var options = {
        stickyClass : "fixed",
        bottomOffset : 50
    };
    
    var container = null;
    var toolbar = null;
    var bottompoint = null;
    
    var placeholder = null;
    var lastVisible = false; // Must be false first to add events to visible toolbars
    var lastDim = null;
    
    // Daemons
    var addRemoveEvents = null;
    var resizeRefresh = null;
    
    // Custom refresh
    var isForceRefresh = false;
    
    var methods = {
        init : function(cont, tb, bp, opt) {
            $.extend(true, options, opt);
            
            container = $(cont);
            toolbar = $(tb);
            bottompoint = $(bp);
            
            methods.runDaemons();
        },
        
        _insertPlaceholder : function() {
            if(placeholder == null) {
                var tag = "div";
                placeholder = $("<" + tag + "></" + tag + ">");
                
                placeholder.css({
                    height : toolbar.outerHeight(),
                    width : toolbar.outerWidth(),
                    margin : toolbar.css("margin")
                });
                toolbar.after(placeholder);
            }
        },
        
        _removePlaceholder : function() {
            if(placeholder != null) {
                placeholder.remove();
                placeholder = null;
            }
        },
        
        _stickToolbar : function() {
            // Keep size and positions
            toolbar.css({
                top : 0,
                left : toolbar.offset().left,
                width : toolbar.width(),
                height : toolbar.height(),
                display : "block",
                position : "fixed",
            });
            
            toolbar.addClass(options.stickyClass);
            methods._insertPlaceholder();
        },
        
        _unstickToolbar : function() {
          ...