JSFiddle - React, Tailwind, and code Playground

by ignaciocorreia

HTML

<div id="header-block">
    Header-block, this sits here in the background
</div>

<div id="content">
    <div id="work">
        This content should be fixed when at the top
    </div>
    <div id="description">
        This content should scroll -
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut ipsum urna. Donec sit amet cursus turpis. Etiam nec laoreet massa. Maecenas vitae ultrices ante. Aenean ut nibh et nisi elementum placerat. Donec velit libero, lobortis vel nibh quis, pharetra tempor augue. Fusce lacinia justo commodo odio accumsan aliquam. In accumsan cursus est nec adipiscing. In vestibulum quam eget lacus condimentum pharetra. Pellentesque pellentesque magna ut ipsum tincidunt porttitor. Praesent bibendum tortor in euismod sollicitudin. Nulla tempus, est in ultrices semper, erat eros ullamcorper velit, ut dictum quam orci sit amet odio.
    </div>
    
</div><!-- end content -->

<div id="footer">
    This should appear at the bottom
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#header-block {
    background: green;
    width: 100%;
    position: fixed;
    z-index: 1;
    height: 300px;
    top: 0;
}
#content {
    margin-top: 300px;
    width: 100%;
    position: relative;
    z-index: 2;
}
#work {
    background: red;
    width: 50%;
    height: 100vh;
    float: left;
    position: absolute;
}
#description {
    background: blue;
    width: 50%;
    height: 1200px;
    float: right;
    font-size: 30px;
}
#footer {
    background: black;
    width: 100%;
    height: 100px;
    position: absolute;
    z-index: 3;
    bottom: 0;
}

JavaScript

// Fix work column on scroll
	window.onscroll = function(){   
	    if( window.XMLHttpRequest ) {
	        var position=window.pageYOffset;
	         if ( position > 300) {
	          $('#work').css({'position':'fixed', 'top':'0'});
	          } else {
	          $('#work').css({'position':'absolute', 'top':'auto' }); 
	         }
	    }
	}