I'm dynamically setting some CSS attributes on an element in jQuery and it seems like the animation is quite choppy and detracts from the user experience:

This is the code where I set the CSS attributes via 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();
  };

This is my HTML element:

  <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>

How can I get the element to scroll to be less choppy?