Specific Section Position Sticky not working

I'm trying to make specific sections towards the bottom of my website sticky so that as you scroll, the sections below it overlap and scroll over top of the previous ones. 

I did some research and this seemed to be the code would be what I needed but whenever I add it and the section ID to the Custom CSS section, it doesn't change the page at all or affect anything on the page. 

position: sticky;
top: 0px;

I tried this on a couple different sites I have with no luck.

Any idea of what might be interfering with the sticky code?

Site: https://chinchilla-manatee-2npn.squarespace.com
password: rumtime24

I want the sticky sections to start at the section titled "Sandy Feet Rum Bar"

9 hours ago, creedon said:

I don't think sticky is going to do what you want effect wise but you can check it out.

.homepage #page .page-section:nth-child( n + 6 ) {

  position : sticky;
  top : 0;
  
  }

Note the use of the homepage class and the nth child notation to start the effect at the six section.

This worked! It's not scrolling all the way to the bottom of the section before starting the next one, but I can work around that I think.

Is there a way to stop the effect at a certain section? Maybe a way to define the range of sections this effects?

Thanks!!

Quote

Is there a way to stop the effect at a certain section? Maybe a way to define the range of sections this effects?

Yes. CSS doesn't have range functionality for nth-child but it it pretty easily to get there with what CSS does provide.

Let's say you wanted to stop the sticky at Carajillo.

.homepage #page .page-section:nth-child( n + 6 ):not( :nth-child( n + 13 ) ) {
 
  position : sticky;
  top : 0;
  
  }

The not pseudo-class is very powerful!

As is often the case with CSS there are other ways to get there. Just depends on how you like to code/think about an issue. If you put the following after the original code I posted that should do it to.

.homepage #page .page-section:nth-child( n + 13 ) {
 
  position : unset;
  top : unset;
  
  }

Sometimes unset doesn't work and you need to look up the default value for the property you are using and use that or whatever SS was using before you interceded.

Let us know how it goes.