JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div id="box">
    <div id="test2">
        <div style="background: #0000ff;">Cum sociis natoque penatibus</div>
        <div style="background: #ff0000;">Cum sociis natoque penatibus</div>
        <div style="background: #0000ff;">Cum sociis natoque penatibu</div>
        <div style="background: #ff0000;">Cum sociis natoque penatibu</div>
        <div id="div1">DIV 1 - <strong>I want to slide down and be a sticky div after #div2 is gone. If I "hit" the footer div I don't want to be sticky anymore.</strong>

        </div>
        <div id="div2">DIV 2 - <strong>If I am gone #div1 should slide down and be sticky</strong> - Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
        <div id="div3"></div>
    </div>
    <div id="test1">Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivhter taedium wal kingdead. The horror, monstra epidemic significant finem. Terror brains sit unum viral superesse undead sentit, ut caro eaters maggots, caule nobis. Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere...

CSS

#test1 {
    margin-right: 300px;
    background: #00ff00;
}
#test2 {
    position: relative;
    width: 300px;
    float: right;
    background: #9FF;
}
#div1 {
    margin: 10px 0 0 0;
    background: #ff00ff;
    border: 2px solid #000;
}
#div2 {
    margin: 10px 0 0 0;
    background: #FF6;
    border: 2px solid #000;
}
#div3 {
    height: 1px;
}
.sticky {
    position: fixed;
    top: 0;
    z-index: 999;
    transition: all .3s;
    -webkit-box-shadow: 0 8px 5px -6px #ccc;
    -moz-box-shadow: 0 8px 5px -6px #ccc;
    box-shadow: 0 8px 5px -6px #ccc;
}
.slider {
    animation: slider .5s;
}
@keyframes slider {
    from {
        top: -100px;
    }
    to {
        top: 0px;
    }
}
.bottom {
    position: absolute;
    bottom:0;
}

JavaScript

$(function () {
    $('#test2').height($('#test1').height());
    $(document).scroll(function () {
        //stick nav to top of page
        var y = $(this).scrollTop(),
            div3 = $('#div3').offset().top,
            foot = $('#footer').offset().top,
            div1Height = $('#div1').height() + 10;
        if (y > div3 && y < foot - div1Height) {
            $('#div1').addClass('sticky slider').removeClass('bottom');

        } else if (y > foot - div1Height) {
            $('#div1').addClass('bottom').removeClass('sticky');
        } else {
            $('#div1').removeClass('sticky bottom slider');

        }
    });
});