JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<header>
    I'm the header
</header>
<div id="container">
    <aside id="sidebar">
        <textarea class="section1">I'm a sidebar section</textarea>
        <div class="Section2">I'm another sidebar section</div>
    </aside>
    <section id="content">
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis turpis, dictum id sollicitudin eu, molestie ut tellus. Nam tincidunt mauris in erat vehicula adipiscing. Morbi cursus orci a nisl auctor nec porta eros consectetur. Vestibulum auctor congue mi, vitae molestie nisi faucibus vel. Ut et dui ut mauris posuere dignissim in et sapien. Duis a nulla ipsum. Duis accumsan porttitor justo at pretium. Aliquam quam urna, eleifend vitae consequat et, pharetra eu lectus. Etiam id magna mi. Donec pulvinar nibh in felis placerat condimentum consectetur enim iaculis. Integer et sapien justo, ac ullamcorper nisi. Praesent sed mauris non lacus pellentesque condimentum. Sed hendrerit consectetur nisi bibendum convallis. Pellentesque semper faucibus tortor malesuada dignissim.</p>
        <p>Aliquam adipiscing commodo est, eu venenatis mi ullamcorper cursus. Integer vel magna in neque aliquet hendrerit. Mauris eros nisl, venenatis quis ultricies id, faucibus et mi. Nunc sit amet nulla odio. Phasellus quis eros id tortor imperdiet faucibus ac eu metus. Curabitur at feugiat dui. Vivamus imperdiet lectus id orci sodales sit amet eleifend ante tempus. Mauris vehicula elit eu dolor volutpat porttitor.</p>
        <p>Praesent pretium convallis diam, sed faucibus dolor convallis eget. Pellentesque sollicitudin erat ac ligula viverra vel mollis diam tristique. Nulla tempus ligula ac dui fringilla consequat. Suspendisse accumsan volutpat semper. Morbi bibendum vehicula nibh id condimentum. Maecenas auctor mattis libero, ut suscipit tellus interdum quis. Nam eu dolor orci. Proin et tortor diam. Phasellus blandit leo ut elit faucibus varius. Donec condimentum congue lectus, sit amet gravida diam aliquet...

CSS

body {
    margin:0;
}

header {
    line-height:100px;
    height:100px;
    background-color:#F00;
}

#container {
    position:relative;
}

#sidebar {
    position:absolute;
    background-color:#0F0;
}

#sidebar .section1 {
    background: blue;
    width: 80px;
}

.Section2.fixed {
   position:fixed;
   top:0;
}
#sidebar .Section2 {
    background: pink;
    height: 150px;
    width: 80px;
}
#sidebar.fixed {
    position:fixed;
    top:0;
}

#content {
    margin-left:100px;
}

p:first-child {
    margin-top:0;
}

JavaScript

var threshold =  $('.Section2').offset().top;
$(window).scroll(function () {
    if ($(window).scrollTop() >= threshold)
        $('.Section2').addClass('fixed');
    else
        $('.Section2').removeClass('fixed');
});