Code for Sticky overlapping sections not working

Hello,

I am using a code I found here on the forum for sticky overlapping sections and it seems to be working for some people but not for me. The site is celery-garlic-dt6m.squarespace.com 

I am trying to make the first section (hero banner) sticky and the 4 following sections below it, as a list of my services. I have tried with the z-index at 0,1,10 and 999. Nothing works! Here is the code I am using for each section:

//sticky services//
section[data-section-id="6500ed413f46670e39fdfe49"] .page-section {
 position:sticky!important; 
 top:0px!important;
  z-index:999!important;
}

4 hours ago, byboldstudio said:

Hello,

 

I am using a code I found here on the forum for sticky overlapping sections and it seems to be working for some people but not for me. The site is celery-garlic-dt6m.squarespace.com 

I am trying to make the first section (hero banner) sticky and the 4 following sections below it, as a list of my services. I have tried with the z-index at 0,1,10 and 999. Nothing works! Here is the code I am using for each section:

//sticky services//
section[data-section-id="6500ed413f46670e39fdfe49"] .page-section {
 position:sticky!important; 
 top:0px!important;
  z-index:999!important;
}

The first section cover almost 100% view

If we set stick/fixed for first section, we can not see the below sections. Can you describe more detail your idea?

11 hours ago, Beyondspace said:

The first section cover almost 100% view

If we set stick/fixed for first section, we can not see the below sections. Can you describe more detail your idea?

It doesn't have to be necessarily on the first section if it's not possible. I want at least the 4 sections below to stack between each other by overlapping one on top of the others, as those are the lists of my services. I also tried just doing those with the code but it doesn't work