Restore sticky card stack: stepped top + z-index, fix scroll runway.
Reverts broken is-stuck body hiding and same-top layout from recent fixes. Each layer sticks lower (L0–L6); higher z covers previous card on scroll. Scroll pull was ~2.75rem (page only 1060px) — now 70vh per layer (~4k scroll). Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+1
-17
@@ -1,4 +1,3 @@
|
||||
/* Overlapping scroll slots — each layer covers the one below via z-index */
|
||||
.scroll-section {
|
||||
height: var(--stack-slot);
|
||||
position: relative;
|
||||
@@ -10,7 +9,7 @@
|
||||
|
||||
.scroll-section--final {
|
||||
height: var(--stack-slot-last);
|
||||
min-height: 260px;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.stack-stop,
|
||||
@@ -18,18 +17,3 @@
|
||||
height: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/* Body visible only when card is stuck on the stack — next card covers previous */
|
||||
.scroll-section:not(.is-stuck) .body,
|
||||
.scroll-section:not(.is-stuck) .layer-inner,
|
||||
.scroll-section:not(.is-stuck) .frame-body,
|
||||
.scroll-section:not(.is-stuck) .unit-body {
|
||||
visibility: hidden;
|
||||
min-height: 0;
|
||||
height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
+1
-26
@@ -1,32 +1,23 @@
|
||||
/** Scroll depth + jump + hide upcoming cards until they cover the stack */
|
||||
/** Scroll depth + jump-to-layer for stack variants */
|
||||
export function initStackScroll(options = {}) {
|
||||
const {
|
||||
sectionSelector = '.scroll-section',
|
||||
depthEl = document.getElementById('depth'),
|
||||
depthPrefix = 'L',
|
||||
tabSelector = '[data-goto], .jump',
|
||||
panelSelector = '.folder, .layer, .frame, .unit',
|
||||
} = options;
|
||||
|
||||
const sections = document.querySelectorAll(sectionSelector);
|
||||
if (!sections.length) return;
|
||||
|
||||
const reveal = () => {
|
||||
const v = getComputedStyle(document.documentElement).getPropertyValue('--stack-reveal').trim();
|
||||
return parseFloat(v) || 344;
|
||||
};
|
||||
|
||||
const mid = () => window.innerHeight * 0.42;
|
||||
|
||||
function updateDepth() {
|
||||
const rLine = reveal();
|
||||
let active = 0;
|
||||
|
||||
sections.forEach((sec) => {
|
||||
const r = sec.getBoundingClientRect();
|
||||
if (r.top <= mid() && r.bottom > mid()) active = Number(sec.dataset.layer);
|
||||
});
|
||||
|
||||
if (depthEl) depthEl.textContent = `${depthPrefix}${active}`;
|
||||
|
||||
document.querySelectorAll('.stack-ruler button, .stack-ruler [data-goto], .tab-rail button, .tab[data-goto]').forEach((el) => {
|
||||
@@ -34,21 +25,6 @@ export function initStackScroll(options = {}) {
|
||||
if (n === undefined) return;
|
||||
el.classList.toggle('active', Number(n) === active);
|
||||
});
|
||||
|
||||
sections.forEach((sec) => {
|
||||
const layer = Number(sec.dataset.layer);
|
||||
const panel = sec.querySelector(panelSelector);
|
||||
if (!panel) return;
|
||||
|
||||
const r = sec.getBoundingClientRect();
|
||||
const pr = panel.getBoundingClientRect();
|
||||
const onStack = Math.abs(pr.top - rLine) < 10;
|
||||
const past = r.bottom <= rLine;
|
||||
|
||||
sec.classList.toggle('is-active', layer === active);
|
||||
sec.classList.toggle('is-stuck', onStack);
|
||||
sec.classList.toggle('is-past', past);
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll(tabSelector).forEach((tab) => {
|
||||
@@ -63,6 +39,5 @@ export function initStackScroll(options = {}) {
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', updateDepth, { passive: true });
|
||||
window.addEventListener('resize', updateDepth, { passive: true });
|
||||
updateDepth();
|
||||
}
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
/* Shared stack scroll — cards share one sticky line and cover via z-index */
|
||||
/* Sticky card stack — enough scroll per layer for cover effect */
|
||||
:root {
|
||||
--stack-nav: 2.5rem;
|
||||
--stack-stick: 3rem;
|
||||
--stack-step: 2.75rem;
|
||||
--stack-tab-h: 2rem;
|
||||
--stack-reveal: calc(var(--stack-stick) + var(--stack-step) * 6 + var(--stack-tab-h));
|
||||
--stack-slot: 100vh;
|
||||
--stack-slot-last: 50vh;
|
||||
/* Scroll one "deck" height before next card covers */
|
||||
--stack-pull: calc(var(--stack-slot) - var(--stack-reveal));
|
||||
--stack-body-h: calc(100dvh - var(--stack-reveal) - 1.25rem);
|
||||
--stack-slot-last: 55vh;
|
||||
/* ~70vh scroll per layer before the next card slides over */
|
||||
--stack-scroll-step: 70vh;
|
||||
--stack-pull: calc(var(--stack-slot) - var(--stack-scroll-step));
|
||||
--stack-body-h: calc(100dvh - var(--stack-stick) - var(--stack-step) * 6 - 3rem);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user