JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<ul id="chaser">
    <li> test </li>
    <li> test </li>
    <li> test </li>
</ul>

<div id="chased"></div>

<div id="tall"></div>

CSS

#tall{
    display: block;
    height:2000px;
}

#chaser{
    background:green;
    position:absolute;
    top:100px
}
#chaser.stick{
    background:red;
}
#chased{
    position:absolute;
    top:50;
    display:block;
    height:10px;
    width:10px;
    background:blue;
}

JavaScript

// Sticky Nav

var top = $('#chaser').offset().top - parseFloat($('#chaser').css('margin-top').replace(/auto/, 0));
 $(window).scroll(function (event){
   var y = $(this).scrollTop();
     
     var header = $('#chaser').offset().top - y,
         onePos = $("#chased").offset().top - y;

     if(header > onePos){
        $('#chaser').addClass("stick");
     } else{
        $('#chaser').removeClass("stick");
     }
 });