JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div id="othdiv">If you scroll past me, then you'll see the green div.</div>
<div id="dvid">Oh hello! :D</div>
<div class="scroll"></div>
<div id="othdiv2">If you scroll past me, green should disappear.</div>

CSS

body {
    height: 800px;
    font-family:'Arial', Helvetica, Sans-Serif;
    color: white;
    font-weight: bold;
}
#othdiv {
    height: 50px;
    background-color: rgb(0, 140, 200);
    /*just wanted this to be pretty :)*/
    position: absolute;
    top: 200px;
    left: 0px;
}
#dvid {
    display:none;
    background-color: rgb(34, 177, 76);
    height: 3000px;
    position: fixed;
    top: 0px;
    left: 380px;
}
#othdiv2 {
    height: 50px;
    background-color: rgb(220, 200, 20);
    /*just wanted this to be pretty :)*/
    position: absolute;
    top: 400px;
    color:black;
    left: 0px;
}
#dvid2 {
    background-color: rgb(34, 177, 76);
    height: 50px;
    position: absolute;
    top: 260px;
    left: 100px;
}
.scroll {
    height:2000px;
    width:10px;
}
}

JavaScript

$(document).ready(function () {
    var topOfOthDiv = $("#othdiv").offset().top;
    var topOfOthDiv2 = $("#othdiv2").offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > topOfOthDiv && $(window).scrollTop() < topOfOthDiv2) {
            $("#dvid").show();
        } else {
            $("#dvid").hide();
        }
    });
});