JSFiddle - React, Tailwind, and code Playground

by Toukakoukan

HTML

<div id="sticky">This will stay at top of page</div>

<div id="avoidMe">Don't hover over me!</div>

CSS

#sticky{
    position:absolute;
    z-index:9999;
}
#avoidMe{
    height:1500px;background-color:red;margin-top:500px;color:white;
}

JavaScript

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_bottomEdge = window_top + $('#sticky').outerHeight();
    var avoid_top = $('#avoidMe').offset().top;
    if (div_bottomEdge < avoid_top) $('#sticky').css('top', window_top);
}

$(document).ready(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});