JSFiddle - React, Tailwind, and code Playground

HTML

<div id="model"></div>
    <div id="icons"></div>
 
 
<div id="content">
  <div id="text">
    
    <p></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae mi metus. Aenean in ante tempor, imperdiet mauris ut, laoreet erat. Vestibulum quis massa eu mi laoreet sagittis at nec purus. Sed congue dolor at dui malesuada convallis. Ut at augue in est rutrum elementum at eu libero. Nullam sed massa dignissim, elementum metus et, gravida lacus. Proin vulputate varius eros eu faucibus. Phasellus vulputate gravida convallis. Nulla et eros in dui commodo blandit.</p>
    <p>Aenean at enim pharetra, fermentum turpis nec, finibus velit. Duis eget vulputate leo. Quisque nec laoreet ipsum. Morbi ut elit eu magna placerat viverra. Suspendisse fringilla risus sit amet vehicula varius. Aliquam iaculis sagittis felis sed vulputate. Pellentesque mattis libero ut diam pharetra tristique. Suspendisse varius libero id mollis ultrices. Aliquam at placerat elit.</p>
    <p>Suspendisse sollicitudin mi ac lacus tristique, sit amet feugiat mauris pretium. Proin suscipit eros nec enim rhoncus, nec elementum enim aliquet. Etiam accumsan viverra consequat. Cras tincidunt cursus dolor, luctus dictum dolor ornare auctor. Duis nec viverra augue. Sed sit amet fermentum dui, nec laoreet enim. Nunc semper, urna eu pulvinar porta, odio lorem mattis mi, nec dictum nisi risus ut nibh. Mauris id dolor vel ex cursus rhoncus. Quisque aliquet lorem vel arcu gravida rutrum non eu purus.</p>
    <p>Morbi nunc nunc, facilisis vel mollis in, imperdiet sed nulla. Integer non ipsum felis. Cras ultrices, ipsum vitae ullamcorper dignissim, urna arcu blandit velit, fermentum tincidunt elit ligula vitae sem. Mauris ut pellentesque augue. In hendrerit, eros at hendrerit blandit, ante felis iaculis diam, id cursus lacus justo eu nunc. Proin ultricies aliquet mauris sed pulvinar. Pellentesque mattis, justo vitae sollicitudin vehicula, mauris enim pharetra ante, ornare varius magna ante a...

CSS

#model {
	background:#0c3c1e;
	width:423px;
	position:absolute;
	margin: 0 0 0 -100px;
	height:60px;}	 

#icons {
	background:#c81924;
	width:893px;
	position:absolute;
	margin: 520px 0 0 -100px;
	z-index: 9999 !important;
	height:10px;}	

#content {
	width:900px;
	height:30px;} 

#content #text {
	float:right;
	width:500px}

JavaScript

$(document).scroll(function () {
    var y = $(this).scrollTop();
	console.log(y);
    if (y > 280 && y < 1600) {
        $('#model').css("position","fixed");
        $('#model').css('top', 0);
		$('#icons').css("position","fixed");
		$('#icons').css("bottom",0);
    }
	
	 else if (y >= 1601) {
        $('#model').css("position","absolute");
		$('#model').css("top",1600);
		$('#icons').css("position","absolute");
		$('#icons').css("top",1600);
    }
	
	else {
        $('#model').removeAttr( 'style' );
		$('#icons').removeAttr( 'style' );
		$('#icons').removeAttr( 'style' );
    }
	
});