JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demo"></div>
<div id="element"></div>

CSS

#demo {
    position:absolute;
    top: -850px;
    display:block;
    height:500px;
    width:500px;
    background: #ccc;
    border:1px solid #000;
    transition: top 6s ease-in-out;
    -webkit-transition: top 6s ease-in-out;
    /** Chrome & Safari **/
    -moz-transition: top 6s ease-in-out;
    /** Firefox **/
    -o-transition: top 6s ease-in-out;
    /** Opera **/
}
#demo.active {
    top:100px;
}
#element.active {
    top:100px;
}
#element {
    display:block;
    position:absolute;
    width:100px;
    height:100px;
    background:red;
    top: 1400px;
    transition: top 4s ease-in-out;
    -webkit-transition: top 4s ease-in-out;
    /** Chrome & Safari **/
    -moz-transition: top 4s ease-in-out;
    /** Firefox **/
    -o-transition: top 4s ease-in-out;
    /** Opera **/
}

JavaScript

var interval = setInterval(function () {
    checkCollision();
}, 1);

setTimeout(function () {
    $('#demo').addClass('active');
    $('#element').addClass('active');
}, 60);




function checkCollision() {
    var top = $('#element').offset().top;
    var bigBoxTop = $('#demo').offset().top + $('#demo').height();
    console.log(bigBoxTop, top);

    if (bigBoxTop >= top) {

        $('#element').css('background', 'black');
        clearInterval(interval);
    }
}