Tabla no fija en la parte superior después de desplazarse hacia abajo utilizando jQuery

En realidad estoy usando jquery para detener la tabla después de desplazarme hacia abajo, pero esto no funciona correctamente. En algún momento está vibrando y no se fija después del desplazamiento, pero a veces funciona bien.

$(document).ready(function () { $(window).scroll(function () { if ($(document).scrollTop() > 200) { $('.reportAction').addClass('reportActionFixed'); } else { $('.reportAction').removeClass('reportActionFixed'); } }) }); 
  .box{ height: 200px; } .reportActionFixed{position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000; background: #fff; padding: 0px; border-bottom: 1px solid #ccc;} 
      
Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Si estoy cambiando scrollTop distance entonces está funcionando bien pero no funciona mientras doy scrolltop 200 . ¿Alguien puede arreglarlo?

Por cierto, estoy usando el último jQuery simple con CSS como se indica en mi código.

Gracias por adelantado.

Make position: sticky en la clase CSS reportActionFixed . Y si no necesita el espacio en blanco sobre la tabla, haga height: 0px en el box clase CSS o elimínelo por completo.

Aquí hay un violín.