freeze headers

Author: tien-tong

docs/datasets/index.html

@@ -26,6 +26,7 @@ <h1> Currently Available Shared Neuroimaging Data Resources </h1>
   background: white;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   position: relative;
+  --sticky-top-offset: 70px;
 }
 
 .datasets-table-container {
@@ -43,17 +44,13 @@ <h1> Currently Available Shared Neuroimaging Data Resources </h1>
   table-layout: auto;
   border: 2px solid #e8eaff;
   border-radius: 10px;
-  overflow: hidden;
   margin: 0;
   padding: 0;
 }
 
 .datasets-table thead {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
-  position: sticky;
-  top: 0;
-  z-index: 10;
 }
 
 .datasets-table th {
@@ -63,10 +60,31 @@ <h1> Currently Available Shared Neuroimaging Data Resources </h1>
   font-size: 14px;
   border: 1px solid #e8eaff;
   position: relative;
+  background: inherit;
   white-space: normal;
   word-wrap: break-word;
 }
 
+.datasets-table-sticky {
+  position: fixed;
+  top: var(--sticky-top-offset);
+  left: 0;
+  z-index: 50;
+  pointer-events: none;
+  visibility: hidden;
+  overflow: hidden;
+}
+
+.datasets-table-sticky table {
+  margin: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.datasets-table-sticky thead {
+  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.35);
+}
+
 /* Header color groups */
 .datasets-table th.structural {
   background: linear-gradient(135deg, #a8b5ff 0%, #8b9cff 100%);
@@ -88,7 +106,12 @@ <h1> Currently Available Shared Neuroimaging Data Resources </h1>
   text-align: left;
   position: sticky;
   left: 0;
-  z-index: 20;
+  z-index: 25;
+  background: inherit;
+}
+
+.datasets-table thead tr:nth-child(2) th:first-child {
+  z-index: 24;
 }
 
 .datasets-table th a {
@@ -252,7 +275,7 @@ <h1> Currently Available Shared Neuroimaging Data Resources </h1>
           {% endif %}
 
           <tr>
-            <td><a href="{{ dataset.website }}">{{ dataset.title }}</a></td>
+            <td><a href="{{ dataset.website }}">{{ dataset.title }} {% if dataset.excerpt and dataset.excerpt != dataset.title %}({{ dataset.excerpt }}){% endif %}</a></td>
             <td>
               {% comment %}Prioritize front matter over CSV{% endcomment %}
               {% assign age_range_display = "" %}
@@ -615,5 +638,86 @@ <h1> Currently Available Shared Neuroimaging Data Resources </h1>
       });
     });
   });
+
+  const container = document.querySelector('.datasets-table-container');
+  const thead = table.querySelector('thead');
+  if (!container || !thead) return;
+
+  const stickyWrap = document.createElement('div');
+  stickyWrap.className = 'datasets-table datasets-table-sticky';
+  const stickyTable = document.createElement('table');
+  stickyTable.appendChild(thead.cloneNode(true));
+  stickyWrap.appendChild(stickyTable);
+  document.body.appendChild(stickyWrap);
+
+  const stickyTopOffset = () => {
+    const raw = getComputedStyle(table.closest('.datasets-table')).getPropertyValue('--sticky-top-offset');
+    const val = parseFloat(raw);
+    return Number.isFinite(val) ? val : 0;
+  };
+
+  const syncSticky = () => {
+    const tableRect = table.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const headHeight = thead.getBoundingClientRect().height;
+    const offset = stickyTopOffset();
+
+    const show = tableRect.top < offset && tableRect.bottom > offset + headHeight;
+    stickyWrap.style.visibility = show ? 'visible' : 'hidden';
+    if (!show) return;
+
+    stickyWrap.style.left = `${containerRect.left}px`;
+    stickyWrap.style.width = `${containerRect.width}px`;
+    stickyTable.style.width = `${tableRect.width}px`;
+    stickyTable.style.transform = `translateX(${-container.scrollLeft}px)`;
+
+    const sourceHeaders = table.querySelectorAll('thead th');
+    const stickyHeaders = stickyTable.querySelectorAll('thead th');
+    const theadStyles = getComputedStyle(thead);
+    const theadBgImage = theadStyles.backgroundImage;
+    const theadBgColor = theadStyles.backgroundColor;
+    sourceHeaders.forEach((th, idx) => {
+      if (!stickyHeaders[idx]) return;
+      const rect = th.getBoundingClientRect();
+      const styles = getComputedStyle(th);
+      const bgImage = styles.backgroundImage;
+      const bgColor = styles.backgroundColor;
+      const isTransparent =
+        bgColor === 'transparent' ||
+        bgColor === 'rgba(0, 0, 0, 0)' ||
+        bgColor === 'rgba(0,0,0,0)';
+
+      stickyHeaders[idx].style.width = `${rect.width}px`;
+
+      if (bgImage && bgImage !== 'none') {
+        stickyHeaders[idx].style.backgroundImage = bgImage;
+        stickyHeaders[idx].style.backgroundColor = bgColor;
+        stickyHeaders[idx].style.backgroundSize = styles.backgroundSize;
+        stickyHeaders[idx].style.backgroundPosition = styles.backgroundPosition;
+        stickyHeaders[idx].style.backgroundRepeat = styles.backgroundRepeat;
+      } else if (!isTransparent) {
+        stickyHeaders[idx].style.backgroundImage = 'none';
+        stickyHeaders[idx].style.backgroundColor = bgColor;
+        stickyHeaders[idx].style.backgroundSize = '';
+        stickyHeaders[idx].style.backgroundPosition = '';
+        stickyHeaders[idx].style.backgroundRepeat = '';
+      } else {
+        stickyHeaders[idx].style.backgroundImage = theadBgImage;
+        stickyHeaders[idx].style.backgroundColor = theadBgColor;
+        stickyHeaders[idx].style.backgroundSize = '';
+        stickyHeaders[idx].style.backgroundPosition = '';
+        stickyHeaders[idx].style.backgroundRepeat = '';
+      }
+
+      stickyHeaders[idx].style.color = styles.color;
+      stickyHeaders[idx].style.borderColor = styles.borderColor;
+    });
+  };
+
+  const scheduleSync = () => window.requestAnimationFrame(syncSticky);
+  window.addEventListener('scroll', scheduleSync, { passive: true });
+  window.addEventListener('resize', scheduleSync);
+  container.addEventListener('scroll', scheduleSync, { passive: true });
+  scheduleSync();
 });
 </script>