JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<!DOCTYPE html>

<html lang="en">

  <head></head>

  <body>
    <style>
      .fixTableHead {
        overflow-y: auto;
        height: 600px;
      }

      .fixTableHead thead th {
        position: sticky;
        top: 0;
      }

      table {
        border-collapse: collapse;
        width: 100%;
      }

      th,
      td {
        padding: 8px 15px;
        border: 2px solid #529432;
      }

      th {
        background: #ABDD93;
      }

    </style>


    <div class="fixTableHead">

      <table class="table table-striped header-fixed" id="tableau">

        <thead>
          <tr>

            <th>A</th>
            <th>B</th>
            <th>C</th>

          </tr>
        </thead>


        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>

          <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
          </tr>

          <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
          </tr>

          <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
          </tr>

          <tr>
            <td>13</td>
            <td>14</td>
            <td>15</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>

          <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
          </tr>

          <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
          </tr>

          <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
          </tr>

          <tr>
            <td>13</td>
            <td>14</td>
            <td>15</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>

          <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
          </tr>

          <tr>
            <td>7</td>
           ...

JavaScript

/* 
	document.addEventListener("DOMContentLoaded", function(event) {
  const scrollpos = localStorage.getItem('scrollpos');
  if (scrollpos) {
  	const scroller = document.querySelector('.fixTableHead');
    if (scroller) {
    	scroller.scrollTop = scrollpos;
    }
  }
});

window.onbeforeunload = function(e) {
	const scroller = document.querySelector('.fixTableHead');
  localStorage.setItem('scrollpos', scroller ? scroller.scrollTop : 0 );
}; 
*/
(function($) {
  const selector = '.fixTableHead';
  if ($(selector).length) {
    const el = $(selector).eq(0)[0];
    el.scrollTop = localStorage.getItem('scrollpos');
    window.onbeforeunload = () => {
      localStorage.setItem('scrollpos', el.scrollTop);
    }
  }
})(jQuery);