Implement JavaScript-based sticky table header

- Created initStickyHeader() function that clones the header
- Cloned header is fixed at top of viewport when scrolling
- Dynamically matches column widths of original header
- Shows/hides based on scroll position
- Header appears when original scrolls out of view
- Works around overflow-x: auto limitation of pure CSS sticky

index.html

@@ -3349,6 +3349,46 @@ function filterByBenchmarks(selectedBenchmarks) {
   });
 }
 
+function initStickyHeader() {
+  const table = document.getElementById('leaderboardTable');
+  const thead = table.querySelector('thead');
+  const tableWrapper = document.querySelector('.tw');
+  
+  // Clone the header for sticky version
+  const stickyHeader = thead.cloneNode(true);
+  stickyHeader.id = 'stickyHeader';
+  stickyHeader.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; z-index: 1000; visibility: hidden; background: var(--surface-alt); box-shadow: 0 2px 8px rgba(0,0,0,0.15);';
+  
+  // Match the width of columns
+  const updateHeaderWidths = () => {
+    const originalCells = thead.querySelectorAll('th');
+    const stickyCells = stickyHeader.querySelectorAll('th');
+    originalCells.forEach((cell, i) => {
+      if (stickyCells[i]) {
+        stickyCells[i].style.width = cell.offsetWidth + 'px';
+      }
+    });
+  };
+  
+  document.body.appendChild(stickyHeader);
+  
+  // Show/hide sticky header based on scroll
+  const handleScroll = () => {
+    const tableRect = table.getBoundingClientRect();
+    const theadRect = thead.getBoundingClientRect();
+    
+    if (theadRect.top < 0 && tableRect.bottom > 50) {
+      stickyHeader.style.visibility = 'visible';
+      updateHeaderWidths();
+    } else {
+      stickyHeader.style.visibility = 'hidden';
+    }
+  };
+  
+  window.addEventListener('scroll', handleScroll);
+  window.addEventListener('resize', updateHeaderWidths);
+}
+
 function init() {
   // Initialize benchmark filter (defaults to 10 benchmarks selected, excluding vision and embedding)
   initBenchmarkFilter();
@@ -3356,6 +3396,9 @@ function init() {
   // Initialize size filter
   initSizeFilter();
   
+  // Initialize sticky header
+  initStickyHeader();
+  
   // Load dark mode preference
   if (localStorage.getItem('dark') === 'true') {
     document.body.classList.add('dark');