I have multiple chapters (1, 2 and 3) and each chapter has text underneath them. When scrolling down, I need the chapters to stick to the top but one after eachother the more you scroll down. Each chapter has different heights (because of their content and also because of different screen sizes). How to make that work? I cannot figure out how to make the height variable and to stack the chapters one after eachother when scrolling down. top-0
should be top minus height of previous chapter
but how to get that variable height of the previous chapter
? Here the base code.
<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>;
In this picture here you see my goal. The second pic on the right shows how it should look when having scrolled all the way down. So one-by-one the chapters stack horizontally.