JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="box"></div>

<table class="table reportAction">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@example.com</td>
    </tr>
  </tbody>
</table>


<img src="https://flyflytravel.com/images/destinacije/maldivi/840x500/maldivi840x500.jpg">

CSS

.reportActionFixed {
  position: sticky;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 1000;
  background-color: white;
  padding: 0px;
  border-bottom: 1px solid #ccc;
  color: white;
}

JavaScript

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(document).scrollTop() > 200) {
      $('.reportAction').addClass('reportActionFixed');
    } else {
      $('.reportAction').removeClass('reportActionFixed');
    }
  })
});