JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="wrap">
    <div id="header"></div>
    <div id="content">
        <div id="main">
            <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam sit amet erat iaculis gravida id sed mauris. Nunc vitae lacus varius risus elementum ultricies auctor nec eros. Vivamus vulputate quam risus, eget pharetra eros. Integer nec viverra nisi. Mauris pharetra velit nec nunc dignissim in pulvinar dui pellentesque. Donec volutpat malesuada odio, nec convallis tellus interdum eget. Pellentesque dictum varius vulputate. Nam quis auctor turpis. Donec consectetur lacus vitae arcu porta ut iaculis sem porttitor.</p>
            <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam sit amet erat iaculis gravida id sed mauris. Nunc vitae lacus varius risus elementum ultricies auctor nec eros. Vivamus vulputate quam risus, eget pharetra eros. Integer nec viverra nisi. Mauris pharetra velit nec nunc dignissim in pulvinar dui pellentesque. Donec volutpat malesuada odio, nec convallis tellus interdum eget. Pellentesque dictum varius vulputate. Nam quis auctor turpis. Donec consectetur lacus vitae arcu porta ut iaculis sem porttitor.</p>
            <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam sit amet erat iaculis gravida id sed mauris. Nunc vitae lacus varius risus elementum ultricies auctor nec eros. Vivamus vulputate quam risus, eget pharetra eros. Integer nec viverra nisi. Mauris pharetra velit nec nunc dignissim in pulvinar dui pellentesque. Donec volutpat malesuada odio, nec convallis tellus interdum eget. Pellentesque dictum varius vulputate. Nam quis auctor turpis. Donec consectetur lacus vitae arcu porta ut iaculis sem porttitor.</p>
            <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam...

CSS

body { font-family:Arial; }
#wrap { width:auto; margin:0 auto; }
#header, #footer { height:600px; background-color:#ccf; }
#content { position:relative; overflow:auto; }
#main { float:left; width:610px; }
#main p { margin:15px 0 15px 0; }
#aside { float:left; width:190px; }
#box { border:2px solid red; width:186px; background-color:#fcc; height:200px; margin-top:15px; }
.fixed { position:fixed; top:0; }
.bottom { position:absolute; bottom:15px; right:0; }

JavaScript

$(document).ready(function() {

    var boxMargin = 15;
    var boxLeft = $("#box").position().left;
    var containerHeight = $("#box").closest("#content").height();
    var containerOffset = $("#box").closest("#content").offset().top;
    var height = $("#box").outerHeight();

    $(window).scroll(function() {
        $("#box").each(function() {
            var windowScroll = $(window).scrollTop();
            if (windowScroll < containerOffset) {
                $(this).removeClass("fixed bottom");
            } else if (windowScroll > containerHeight + containerOffset - height - 2 * boxMargin) {
                $(this).removeClass("fixed").addClass("bottom").css({
                    "left": ""
                });
            } else {
                var leftValue = boxLeft + $(this).closest("#content").offset().left;
                $(this).removeClass("bottom").addClass("fixed").css({
                    "left": leftValue
                });
            }
        });
    });

});