Javascript 在可滚动的外部面板上固定内部div

我在React web应用程序中有一些页面内容，在用户滚动时某些字段应该保持固定。让我恼火的是，这个内容包含在一个可滚动的外部div中。这个外部div必须保持可滚动，因为它偶尔会加载需要它的不同组件

以下是div结构：

<div class="inner"><!-- overflow-y: auto; (this must remain)-->

  <div class="wrapper">
    <div class="titleBar"> <!-- I need this to not scroll -->
      <div class="mainTable">
        <table>
          <th>...</th> <!-- I need this to not scroll -->
          <tbody>
            ...
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>

... 
...

因此，当用户向下滚动页面时，标题栏和表头应该保持不变，页面上只有表体内容在滚动。我不能仅仅使表格主体可滚动，因为这将在表格本身上放置一个滚动条，它需要在实际的页面滚动上滚动

---

我能找到的关于此的大多数帖子都使用JQuery，但由于这是在ReactJS中，我正在寻找其他解决方案。

正确的表头结构是：

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
</table>

thead th {
  position:sticky;
  top: 0
}