Sticky Sections Overlay Scroll Issues (Doesn't Work with Section Dividers?)

Hi! I'm trying to add a sticky overlay scroll to create an effect like the one on this homepage:

https://www.innerpowergrowthcoaching.com/

This is the site I'm working on:

https://playfairappraising.squarespace.com/?password=tim

I've been using this css, from this tutorial: https://insidethesquare.co/squarespace-tutorials/overlay-scroll

#page .page-section {
position: sticky!important; 
top: 0px!important
} 
html {
scroll-behavior: smooth
} 

I've tried both the above css, which targets all sections, and singling out specific sections with the block IDs. In both cases, the scrolling goes all wonky. My theory was that it only worked on sections that *did not have a divider applied* but now I see that Inner Power Coaching site linked above, with the same style dividers, and clearly there's a way to do it!

I'd really appreciate any insight/suggestions! Thanks in advance.

You probably need something a bit more like this to just target specific sections:

@media only screen and (min-width: 960px) {
  .page-section:nth-child(2), .page-section:nth-child(3), .page-section:nth-child(4), .page-section:nth-child(5), .page-section:nth-child(6), .page-section:nth-child(7), .page-section:nth-child(8) {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: -4px !important;
    z-index: 0 !important;
  }
}

Hi @Ziggy if you use something like this, is there an extra piece code that will ensure overflow text from dropdown buttons is accommodated for? 

At present I have an issue where the content in each section ends up being un-readable as it is cropped by the sticky sections as the user scrolls.

Hope that makes sense.

Thanks

This customisation relies on your content fitting in the browser, it can't easily be turned on and off depending on the content within each section. If you have a section with more content it is probably worth excluding that section from the sticky code.

@Ziggy Thanks for reply.

I think that is the right approach however, Safari seems to have a break down when switching from sticky to static scroll. It works when scrolling to bottom of webpage, however when you scroll back it breaks and background of static scrolling sections disappear. Please see photos to illustrate the overlapping of elements.

Is there a way to fix this issue?
Many thanks