javascript - how to synchronize two div on scroll of first div horizontal? -

i have 2 divs, 1 header other body. width of both div different. want synchronize header on scroll of body horizontal. using script:

<div class="table-header " >      <div class="dep">dep #</div>      <div class="_lname">last name</div>      <div class="_fname">first name</div>  </div>  <div class="table-body">      <div class="dep">dep #</div>      <div class="_lname">last name</div>      <div class="_fname">first name</div>  </div>     $(".table-body", that.target).on("scroll", function(event){     settimeout(function(){       $("#headerdiv").scrollleft( $(".table-body").scrollleft()*1.27);       },500);     }); 

and css is

.table-header {     width: 798px !important;      overflow : hidden; } .table-body {     overflow-y: scroll;     width: 632px !important;     height: 50px !important; } 

but not synchronized. how can fix it?

fiddle link : https://jsfiddle.net/psczne5e/

okay here propose.
1. put header in body (btw normal).
2. edit css :

header{ position:absolute; top:0; left:0; height:100px; min-height:100px; width:100%; min-width:800px; } 

with no css overfolw, same body, if want y , x scroll in body css.
x scroll same , body go behind header y scroll. (if not give z-index header)
must want.