JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<div class="allother" style="margin: 0 auto; width:100%;position:absolute;top:0;">
    <div class="content" style="margin: 0 auto;">
        <div class="content"></div>
    </div>
    <div id="k"></div>
    <div class="content" style="margin: 0 auto;height:2000px;">
        <div class="content" style="height:2000px;"></div>
    </div>
</div>
<div class="allother" style="margin: 0 auto; width:100%;position:absolute;top:0;">
    <div id="sticky" class="content" style="margin: 0 auto;background:none;">
        <div style="background:#00cc00;width:25%;float:right;height:200px;"><span>Siin on sticky</span>
            <button>Toggle</button>
        </div>
    </div>
</div>

CSS

#k {
    height:100px;
    width:100%;
    background:#cc0000;
}
.content {
    width:75%;
    background:rgba(0, 0, 0, 0.5);
    height:200px;
}

JavaScript

$("button").click(function () {
    $("#k").toggle();fstick();
});
var fstick= function () {
    var a = $(window).scrollTop();
    if($("#k")!=undefined ){
        if($("#k").is(":visible")){
            var b = $("#k").height()+$("#k").position().top;
            var newtop = (a <= b) ? b + "px" : a + "px";
            $("#sticky").css({
                "margin-top": newtop
            });
            console.log(a + "|" + b);
        }else{
            $("#sticky").css({
                "margin-top": a + "px"
            });
        }
    }
};
$(window).scroll( function () {fstick()});
fstick();