El encabezado de la tabla permanecerá fijo en la parte superior cuando el usuario lo desplace fuera de la vista con jQuery

Estoy intentando diseñar una tabla HTML donde el encabezado permanecerá en la parte superior de la página cuando Y SÓLO cuando el usuario lo desplace fuera de la vista. Por ejemplo, la tabla puede estar a 500 píxeles de la página, ¿cómo puedo hacer para que si el usuario desplaza el encabezado fuera de la vista (el navegador detecta de alguna manera que ya no está en la vista de Windows), permanezca en la parte superior? ? ¿Alguien puede darme una solución Javascript para esto?

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
  </tbody>
</table>

Expandir fragmento

Entonces, en el ejemplo anterior, quiero que <thead>se desplace con la página si se pierde de vista.

IMPORTANTE: NO estoy buscando una solución en la que <tbody>tenga una barra de desplazamiento (desbordamiento: automático).

Jan 17 '11 08:01

Harías algo como esto tocando el scrollcontrolador de eventos en windowy usando otro tablecon una posición fija para mostrar el encabezado en la parte superior de la página.

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
  var offset = $(this).scrollTop();

  if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
    $fixedHeader.show();
  } else if (offset < tableOffset) {
    $fixedHeader.hide();
  }
});

#header-fixed {
  position: fixed;
  top: 0px;
  display: none;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-1">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
  </tbody>
</table>
<table id="header-fixed"></table>

Expandir fragmento

Esto mostrará el encabezado de la tabla cuando el usuario se desplace hacia abajo lo suficiente como para ocultar el encabezado de la tabla original. Se ocultará nuevamente cuando el usuario haya vuelto a desplazarse lo suficiente por la página.

Ejemplo de trabajo: https://jsfiddle.net/andrewwhitaker/fj8wM/

Jan 17 '2011 03:01 Andrew Whitaker

CSS puro (sin soporte para IE11):

table th {
    position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome
    position: sticky;
    top: 0;
    z-index: 1; // any positive value, layer order is global
    background: #fff; // any bg-color to overlap
}

May 04 '2017 14:05 Ihor Zenich