JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="scroller-left">Some controls left</div>
		<div id="scroller-right">Some controls right</div>
</body>

CSS

body{
		    height:2000px;
		    width: 100%;
		    margin:0;
		    padding:0;
		}
		#scroller-left{
		    float: left;
		    background:#CCC;
		}
		#scroller-right{
		    float: right;
		    background:#CCC;
		}

JavaScript

$(window).load(function(){
		    $(window).scroll(function(){
		        if($(window).scrollTop()>10){
		            $('#scroller-left').css('position', 'fixed');
		            $('#scroller-left').css('top', 0);
		            $('#scroller-right').css('position', 'fixed');
		            $('#scroller-right').css('top', 0);
		        } else {
		            $('#scroller-left').css('position', 'relative');
		            $('#scroller-left').css('top', 0);
		            $('#scroller-right').css('position', 'relative');
		            $('#scroller-right').css('top', 0);
		        }
		    });
		});