Bootstrap Sticky Table Header on Scroll — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bssticky-card">
    <div class="card-body p-3">
      <h6 class="fw-bold mb-2">Order history</h6>
      <div class="bssticky-scroll" id="bsstickyScroll">
        <table class="table table-sm mb-0">
          <thead>
            <tr>
              <th>Order</th>
              <th>Customer</th>
              <th>Total</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody id="bsstickyBody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

.bssticky-card { width: 460px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bssticky-scroll { max-height: 260px; overflow-y: auto; border: 1px solid #eceef1; border-radius: 8px; }
.bssticky-scroll thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  transition: box-shadow .15s ease;
}
.bssticky-scroll.bssticky-scrolled thead th {
  box-shadow: 0 2px 4px rgba(20, 22, 28, .08);
}

const scrollBox = document.getElementById('bsstickyScroll');
const body = document.getElementById('bsstickyBody');

const STATUSES = [
  ['Shipped', 'success'], ['Processing', 'secondary'], ['Delivered', 'success'],
  ['Delayed', 'warning'], ['Cancelled', 'danger'],
];
const NAMES = ['Dana Reyes', 'Marcus Lee', 'Priya Nair', 'Sofia Chen', 'Wale Adeyemi', 'Ken Sato'];

let rows = '';
for (let i = 1; i <= 24; i++) {
  const [label, tone] = STATUSES[i % STATUSES.length];
  const name = NAMES[i % NAMES.length];
  rows += '<tr><td>#' + (1000 + i) + '</td><td>' + name + '</td><td>$' + (20 + i * 7) +
    '.00</td><td><span class="badge text-bg-' + tone + '">' + label + '</span></td></tr>';
}
body.innerHTML = rows;

// The sticky header is pure CSS (position: sticky). The only thing JS adds is
// a shadow that appears once the body has actually scrolled underneath it,
// so the header only looks "elevated" when there's real content behind it.
scrollBox.addEventListener('scroll', () => {
  scrollBox.classList.toggle('bssticky-scrolled', scrollBox.scrollTop > 0);
});