JSFiddle - React, Tailwind, and code Playground

by Cwalkdawg

HTML

<div id="one">Hello, I'm content That's long
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="footer">I'm a footer</div>

CSS

#one {
    background-color:red;
}
#footer {
    background-color: gray;
}

JavaScript

$j = jQuery.noConflict();

//this is the floating content
$j(document).ready(function () {
    var $floatingbox = $j('#one');

    $j(window).scroll(function () {

        var scrollY = $j(window).scrollTop();
        var winHeight = $j(window).height();
        var isfixed = $floatingbox.css('position') == 'fixed';

        if ($floatingbox.length > 0) {

            if (scrollY > winHeight && !isfixed) {
                $floatingbox.stop().css({
                    position: 'fixed',
                    top: 10,
                });
            } else if (scrollY < winHeight && isfixed) {
                $floatingbox.css({
                    position: 'relative',
                    top: 0,
                });
            }

        }

    });
});