JSFiddle - React, Tailwind, and code Playground

HTML

<div id="colleft">
    blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<a href="http://shikiryu.com">test lien </a><br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
</div>

JavaScript

function Add_Event( obj_, event_, func_, mode_){
  if( obj_.addEventListener)
    obj_.addEventListener( event_, func_, mode_? mode_:false);
  else
    obj_.attachEvent( 'on'+event_, func_);
}
//----------------------
function GetScrollPage(){
  var Left;
  var Top;
  var DocRef;
 
  if( window.innerWidth){
    with( window){
      Left   = pageXOffset;
      Top    = pageYOffset;
    }
  }
  else{ // Cas Explorer a part
    if( document.documentElement && document.documentElement.clientWidth)
      DocRef = document.documentElement;
    else
      DocRef = document.body;
 
    with( DocRef){
      Left   = scrollLeft;
      Top    = scrollTop;
    }
  }
  return({top:Top, left:Left});
}
//---------------------------
function ObjGetPosition(obj_){
  var PosX = 0;
  var PosY = 0;
  //-- suivant type en parametre
  if( typeof(obj_)=='object')
    var Obj  = obj_;
  else
    var Obj  = document.getElementById( obj_);
  //-- Si l'objet existe
  if( Obj){
    //-- Recup. Position Objet
    PosX = Obj.offsetLeft;
    PosY = Obj.offsetTop;
    //-- Si propriete existe
    if( Obj.offsetParent){
      //-- Tant qu'un parent existe
      while( Obj = Obj.offsetParent){
        if( Obj.offsetParent){ // on ne prend pas le BODY
          //-- Ajout position Parent
          PosX += Obj.offsetLeft;
          PosY += Obj.offsetTop;
        }
      }
    }
  }
  //-- Retour des positions
  return({left:PosX, top:PosY});
}
//-------------------------------------
// MENU FLOTTANT //////////////////////
//-------------------------------------
var IdTimer_1;
var IdTimer_2;
var O_DivScroll;
var Rapport = 1.0/20.0;  
var Mini = 2* Rapport;
//-----------------------
function DIV_Scroll( id_){
  var Obj = document.getElementById( id_);
  this.Obj = Obj;
  if( Obj){
    Obj.style.position = "absolute"; // IMPERATIF
    //-- Recup position de depart
    var Pos   = ObjGetPosition( id_);
    this.PosX = Pos.left;
    this.PosY = Pos.top;
    this.DebX = this.PosX;
    this.DebY =...