JSFiddle - React, Tailwind, and code Playground

JavaScript

var thresholdCrossed = false;

$('#content').scroll(function () {    
var scroll = $('#content').scrollTop();    
var threshold = 200;    
if (scroll > threshold && !thresholdCrossed) {        
var controls = $(".controls").clone();        
$(".controls").remove();        
$('#header').append(controls);    
} 
else if (scroll <= threshold && thresholdCrossed) {        
var controls = $(".controls").clone();        
$(".controls").remove();        
$('.banner').append(controls);    
}    

thresholdCrossed = scroll > threshold;});