Advice on construction method for scrolling 'sections'

Hi folks.

Can you guys advise on how to structure and ideally which type of animations to also assign to achieve the attached?

What I have is a ‘list’ at the bottom of the home page where when I click on any of the items, it nicely scrolls that section to the top and expands the content to reveal that section’s content… and that section title becomes sticky at the top as I scroll down to consume the content.

THEN

As I arrive to the next section, as it hits the top of the page it pushes up the old section title and autop expands to reveal the next section content and so on…

I have a detailed figma built if you prefer to peek there… but here are some screen shots!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Here is my build so far:

https://preview.webflow.com/preview/dfsd-54a3ad?utm_medium=preview_link&utm_source=designer&utm_content=dfsd-54a3ad&preview=9a23f4701f05ba3ebef5808d33f9efb7&mode=preview