JSFiddle - React, Tailwind, and code Playground

by Deepak Manwal

HTML

<header></header>
<div id="container">
    <div id="staticRight"></div>
    <article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies turpis diam, vitae pulvinar arcu dapibus tempor. Aenean at tellus dui. Nunc nec nulla vitae lectus dictum sollicitudin in eget turpis. Pellentesque sodales ligula venenatis nulla interdum, eu consequat nibh convallis. Integer ac ante ligula. Duis elementum elit nunc, quis porta risus posuere vitae. Nullam gravida sit amet nisi vitae interdum. Donec interdum tristique risus commodo scelerisque. Cras nulla lacus, aliquet non consectetur tempus, luctus imperdiet nisl. Sed ut risus sed nisl dapibus rutrum ac quis urna. Sed euismod convallis mi, sit amet mollis quam gravida eleifend. Phasellus et condimentum est, sit amet semper nulla. Ut eget laoreet dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tempor sit amet felis quis fermentum. Phasellus tincidunt eget arcu eleifend volutpat. Aliquam erat volutpat. Proin neque nulla, hendrerit sed magna in, euismod sodales neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed venenatis tortor sem. Donec libero ligula, mollis eget tincidunt sit amet, adipiscing ac elit. Nulla arcu justo, placerat sit amet quam eu, mollis adipiscing odio. Praesent non luctus sem. Nam accumsan iaculis justo, quis condimentum nisi interdum nec. Fusce consequat pharetra orci, vitae volutpat leo rutrum ac. Integer congue lobortis nisl, a bibendum augue iaculis nec. In lobortis metus nec pretium adipiscing. Nullam ut facilisis felis. Nullam auctor, lectus et sollicitudin vestibulum, diam felis vestibulum risus, rhoncus placerat enim mauris ac purus. Mauris iaculis nunc augue, a fermentum dolor congue et. Vivamus tincidunt justo in nulla ullamcorper, a lacinia eros sodales. Donec nec urna scelerisque, viverra tortor sit amet, malesuada velit. Proin faucibus, libero in varius aliquam, nunc mi...

CSS

header {
   width: 100%;
    height: 10em;
    border: purple thin solid;
}
#container {
    border: thin solid red;
    position: relative;
    height: 100%;
    max-width:30em;
    margin: 0 auto 0 auto;
}
#staticRight {
    border: green thin solid;
    display: inline-block;
    float: right;
    right: 0;
    margin: 2em 0 0 0;
    width: 120px;
    height:600px;
    font-size: .82em;
    line-height:2em;
}
article {
    border: blue thin solid;
    max-width: 20em;
}

JavaScript

var elementPosition = $('#staticRight').offset();
        $(window).scroll(function () {
            if ($(window).scrollTop() > elementPosition.top) {
                $('#staticRight').css('position', 'fixed').css('top', '0').css('right','20px');

            } else {
                $('#staticRight').css('position', 'static');
            }
        });