Smooth scroll when setting CSS element in jQuery

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?