JSFiddle - React, Tailwind, and code Playground

by glsee

HTML

<div id="section1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl tortor, sodales quis mattis id, lobortis ut felis. Praesent luctus quis neque a mollis. In porta, sem non ornare pretium, sapien mauris laoreet erat, in porttitor ipsum quam eu leo. Aenean justo massa, iaculis in urna et, ultrices facilisis elit. Sed nec odio a dolor tempus dictum vel in ipsum. Donec euismod, orci cursus semper pharetra, enim augue cursus eros, a mattis nibh tellus luctus quam. Phasellus at quam lacus. Curabitur egestas est a lorem adipiscing egestas ac id quam. Cras tempor placerat lectus. Aenean iaculis scelerisque lectus sit amet ornare. Nullam eget risus tristique, tempus erat at, dapibus augue. Maecenas eros eros, commodo a aliquam vitae.</p>
</div>
<div id="section2">
    <div id="affixy">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl tortor, sodales quis mattis id, lobortis ut felis. Praesent luctus quis neque a mollis. In porta, sem non ornare pretium, sapien mauris laoreet erat, in porttitor ipsum quam eu leo. Aenean justo massa, iaculis in urna et, ultrices facilisis elit. Sed nec odio a dolor tempus dictum vel in ipsum. Donec euismod, orci cursus semper pharetra, enim augue cursus eros, a mattis nibh tellus luctus quam. Phasellus at quam lacus. Curabitur egestas est a lorem adipiscing egestas ac id quam. Cras tempor placerat lectus. Aenean iaculis scelerisque lectus sit amet ornare. Nullam eget risus tristique, tempus erat at, dapibus augue. Maecenas eros eros, commodo a aliquam vitae, scelerisque ac dui.</p>

            <p>Mauris non purus porta, dapibus ipsum rutrum, dictum neque. Morbi eget pellentesque nisl, quis ultricies massa. Nam fringilla tellus in urna interdum sagittis. Mauris volutpat adipiscing...

CSS

body {
    margin: 0;
}

#section2 {
    background: #ededed;
    position: relative;
    width: 100%;
    margin: 0 5px;
}

#affixy {
    background: #ccc;
    position: absolute;
    top: 10px;
    left: 0;
    /* margin: 10px; */
    width: 20%;
}

#affixy.affix {
    position: fixed;
    left: 5px;
}

#affixy.affix-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
}

#section2 .content {
    background: #ddd;
    margin-left: 25%;
}

JavaScript

(function($) {
    var $affixy = $('#affixy'),
//        $affixyBottom = $affixy.clone().addClass('affix-bottom').insertAfter($affixy),
//        offsetBottom = $affixyBottom.offset().bottom,
        offsetTop = $affixy.offset().top;
    
//    $affixyBottom.remove();
//    console.log(offsetTop, offsetBottom);
    console.log(offsetTop - parseInt($affixy.css('margin-top') - parseInt($affixy.css('top'))));
    $affixy.affix({
        offset: {
            top: offsetTop - parseInt($affixy.css('margin-top')) - parseInt($affixy.css('top')),
//            bottom: offsetBottom + $affixy.height()
        }
    });
})(jQuery);