javascript - Derularea în jos face ca div-urile să rămână lipite de partea de sus unul după altul

Am mai multe capitole (1, 2 și 3) și fiecare capitol are text dedesubt. Când derulez în jos, am nevoie ca capitolele să rămână fixe în partea de sus, unul după altul, pe măsură ce continui să derulezi. Fiecare capitol are înălțimi diferite (din cauza conținutului lor și, de asemenea, din cauza dimensiunilor diferite ale ecranului). Cum pot face să funcționeze asta? Nu reușesc să îmi dau seama cum să fac înălțimea variabilă și să așez capitolele unul după altul când derulez în jos. top-0 ar trebui să fie top minus înălțimea capitolului anterior, dar cum obțin acea înălțime variabilă a capitolului anterior? Iată codul de bază.

<div>
  <div className="sticky top-0 z-10 w-full bg-red-400">
    <h1>
      Chapter 1 div - big height big height big height big height big height big
      height
    </h1>
  </div>
  <p>
    Here text - here text - Here text - here textHere text - here textHere text
    - here textHere text - here text Here text - here text - Here text - here
    textHere text - here textHere text - here textHere text - here textHere text
    - here text - Here text - here textHere text - here textHere text - here
    textHere text - here textHere text - here text - Here text - here textHere
    text - here textHere text - here textHere text - here textHere text - here
    text - Here text - here textHere text - here textHere text - here textHere
    text - here text
  </p>
  <div className="sticky top-0 z-10 w-full bg-green-400">
    <h1>
      Chapter 2 div - biggest height biggest heightbiggest heightbiggest
      heightbiggest height heightbiggest heightbiggest heightheightbiggest
      heightbiggest heightheightbiggest heightbiggest height
    </h1>
  </div>
  <p>
    More words - more words - More words - more words - More words - more words
    - More words - more words - More words - more words - More words - more
    words -{" "}
  </p>
  <div className="sticky top-0 z-10 w-full bg-yellow-400">
    <h1>Chapter 3 div - small height </h1>
  </div>
  <p>
    Read this - Read this - Read this - Read this - Read this - Read this - Read
    this - Read this - Read this - Read this - Read this -{" "}
  </p>
</div>;

În această imagine vedeți scopul meu. A doua imagine din dreapta arată cum ar trebui să arate după ce s-a derulat complet în jos. Astfel, capitolele se așază unul câte unul orizontal.

Răspuns #1

Nu cunosc nicio soluție pur CSS pentru a stiva secvențial elementele CSS cu poziționare sticky. Trebuie să atribui valoarea top pentru a realiza acest lucru — JavaScript pare să fie singura modalitate:

const els = (sel, par) => (par || document).querySelectorAll(sel);

const stickables = () => {
  els(".stickables").forEach(elGroup => {
    let prevHeight = 0;
    els(".sticky", elGroup).forEach((elSticky) => {
      if (prevHeight) {
        elSticky.style.setProperty("--y", prevHeight);
      }
      prevHeight += elSticky.clientHeight;
    });
  });
};

addEventListener("resize", stickables);
addEventListener("load", stickables);
stickables();

* { margin:0; box-sizing: border-box; }
.top-0 { top: 0; }
.bg-red-400 { background: hsl(0 80% 50%); }
.bg-green-400 { background: hsl(100 80% 50%); }
.bg-yellow-400 { background: hsl(60 80% 50%); }


.stickables {
  max-width: 500px;
  margin: 0 auto;
}

.sticky {
  position: sticky;
  top: calc(var(--y, 0) * 1px);
}

<div class="stickables">
  <div class="sticky bg-red-400">
    <h1>
      Chapter 1 div
    </h1>
  </div>
  <p style="height: 100vh;">Long text... scroll down...</p>
  <div class="sticky bg-green-400">
    <h1>
      Chapter 2 div - biggest height biggest heightbiggest heightbiggest heightbiggest height 
    </h1>
  </div>
  <p style="height: 100vh;">Long text... scroll down...</p>
  <div class="sticky bg-yellow-400">
    <h1>Chapter 3 div - small height </h1>
  </div>
  <p style="height: 100vh;">Long text... scroll down...</p>
</div>

Oricum, pare că ești în căutare de probleme. Cineva cu un ecran de înălțime redusă - după toate titlurile se aliniază unele sub altele, riști să nu poți citi conținutul corespunzător.
Dacă nu ții cont de asta... pare o abordare interesantă, dar eșuată, de a realiza ceva neobișnuit :)