Estoy configurando dinámicamente algunos atributos CSS en un elemento en jQuery y parece que la animación es bastante entrecortada y resta valor a la experiencia del usuario:

Este es el código donde configuro los atributos CSS a través de jQuery:

 updateValue = _.debounce(() => { var scroll = $(window).scrollTop(); $("#tableBody").css("visibility", "hidden"); if ($("#div1").offset() && scroll >= $("#div1").offset().top) { $("#idHeader tr th").css("top", scroll - $("#div1").offset().top - 10); } else { $("#idHeader tr th").css("top", 0); } $("#tableBody").css("visibility", "visible"); }, 1); handleScroll = () => { this.updateValue(); };

Este es mi elemento HTML:

 <div style={{ overflowX: "scroll" }}> <div id="div1" className="container"> <table className="odds-table"> <thead id="idHeader"> <tr> <th style={{ padding: 10 }}></th> {this.renderSportsbooks(marketOdds)} </tr> </thead> <tbody id="tableBody">{this.renderOdds(marketOdds)}</tbody> </table> </div> </div>

¿Cómo puedo hacer que el elemento se desplace para que sea menos entrecortado?