JSFiddle - React, Tailwind, and code Playground

HTML

<table width="900" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="676">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eros augue, bibendum sit amet consectetur eget, aliquet luctus augue. Nunc tempor luctus auctor. In hac habitasse platea dictumst. Etiam quis velit nunc. Sed cursus ultrices posuere. Praesent venenatis sagittis diam, ut iaculis felis pellentesque mollis. Cras at dolor sit amet mi accumsan imperdiet vel quis neque. Quisque in tortor magna, non aliquam erat.<br /><br />

Pellentesque augue tellus, porttitor ac ullamcorper vitae, convallis vel tellus. Nunc ultricies sapien non lectus aliquet a eleifend magna feugiat. Aenean sit amet arcu vitae mi ornare condimentum. Nunc laoreet faucibus dui venenatis egestas. Vivamus a sem magna. Maecenas id libero magna. Aenean eu malesuada diam. Morbi congue, nibh accumsan congue sagittis, arcu enim ullamcorper diam, vitae dapibus magna est in quam. Maecenas dignissim tincidunt turpis nec porttitor. In in nibh orci, sit amet vestibulum tortor. Fusce sodales ornare posuere.<br /><br />

Pellentesque in facilisis augue. Nam semper vehicula libero, nec dictum elit rutrum et. Praesent varius convallis blandit. Maecenas eu eros eget orci bibendum lobortis. Fusce volutpat magna eu odio posuere porta ut ut dui. Sed facilisis nisi non risus bibendum lobortis. Nunc placerat orci id metus lacinia a laoreet felis vulputate. Etiam quis mollis purus. Mauris magna neque, viverra non dignissim vitae, molestie eget lorem.<br /><br />

Phasellus egestas dui at elit iaculis mattis. Nullam hendrerit felis ut elit eleifend luctus. Sed gravida tellus nec neque molestie in auctor augue fermentum. Maecenas vitae bibendum lectus. Vestibulum justo nunc, euismod quis accumsan eu, auctor ac justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultricies, enim vitae blandit venenatis, odio libero tempus mauris, quis luctus dolor elit vel lacus. Vivamus metus quam, suscipit et blandit ornare,...

CSS

.white {color: #FFF;}
#floater {
    width: 224px;
    height: 220px;
    background:#093;   
}

#floater.floating {}

#floater div {
    position: absolute;
}

.top {}

.bottom {
    position: absolute;
    bottom: 0;
}

.floating {
    position: fixed;
    top: 0;
}

JavaScript

function fixInParent(selector) {
    var $el = $(selector);

    $(window).scroll(function() {
        if($el.parent().offset().top > $(this).scrollTop())
            $el.addClass('top').removeClass('floating').removeClass('bottom');
        else if ($(this).scrollTop() + $el.height() < $el.parent().offset().top + $el.parent().height())
            $el.addClass('floating').removeClass('top').removeClass('bottom');
        else
            $el.addClass('bottom').removeClass('top').removeClass('floating');
    });
}

$(document).ready(function() {
    fixInParent('#floater');
});