Sticky Section

Hello!

I've tried just about every sticky code I could find to get this section to stick but nothing has been working and I can't figure out why.

https://pelican-mayflower-36wy.squarespace.com

Password:  Lincoln22

On the "About Us" section, I'd like the 3rd section with the horizontal text box to stick when scrolling (these will be anchor links for each section down the page eventually).

This is the current code using the section id:

[data-section-id="638be36f99d1a11c19df1661"] {
  position: sticky;
    top: 0px;
    position: -webkit-sticky;
    z-index: 9999;
}

I've tried adding !important, I've tried using the text block id, I even tried adding a div code to identify the block, I just can't seem to get it to stick.  Any help would be appreciated!

Thank you!
Blayne

6 minutes ago, BlayneG87 said:

I've tried just about every sticky code I could find to get this section to stick but nothing has been working and I can't figure out why.

The sticky element appears to be working for me.

@paul2009 so weird!  That is not happening for me.  I even tried clearing my cache & cookies and restarting my browser.  Just curious what browser you are using?

https://www.loom.com/share/ab40727ff75d4b27ad1bfae3b73338e6

24 minutes ago, BlayneG87 said:

Just curious what browser you are using?

It is working on the latest Chrome, Firefox and Safari for me.

Looks good to me as well. Viewed on macOS/Chrome.

Have you tried looking at the page in private browsing? What happens? What OS and browser are you using?

You also might try rearranging some of the parameters.

[data-section-id="638be36f99d1a11c19df1661"] {

  position : -webkit-sticky;
  position : sticky;
  top : 0px;
  z-index : 9999;
  
  }

@creedon thanks for checking and letting me know it works for you as well.

I'm on macOS/chrome as well.  I tried incognito and still wasn't able to see the section sticking.

Maybe it's some glitch in Squarespace?  Not sure why I would be unable to see it but it works for others who are not actively editing in the program. 

Have you updated Chrome to the latest?

@creedon Just checked and my chrome is up to date.  🙂

I'm having the same problem. The section I'm trying to stick is a classic section (because of the FE gallery block bug that prevents resizing). It's the only classic section amongst a sea of FE. Could this be my issue? Thanks!

4 hours ago, EyeCandySee said:

I'm having the same problem. It's the only classic section amongst a sea of FE.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

On 12/4/2022 at 9:59 PM, creedon said:

Have you tried looking at the page in private browsing? What happens? What OS and browser are you using?

You also might try rearranging some of the parameters.

[data-section-id="638be36f99d1a11c19df1661"] {

  position : -webkit-sticky;
  position : sticky;
  top : 0px;
  z-index : 9999;
  
  }

 

I'm so annoyed i had this code working perfectly, but i had to remove it to edit something then forgot to put it back, now i cant get it to work again!!! please could you help? all the layering is messed up on scroll

www.annajonesbridal.co.uk/home-new 

www.annajonesbridal.co.uk/weddings

i used this adapted code instead from @inside_the_square and it seems to be working now:

section id taken from the section you want to be sticky, so the effect is that the next section underneath scrolls / overlaps the first section

section[data-section-id="6553bddea684286457fd7144"].page-section {
position: sticky!important; 
top: 0px!important;
  z-index:0;
} 

On 12/8/2023 at 2:30 PM, daniellenoakes said:

i used this adapted code instead from @inside_the_square and it seems to be working now:

section id taken from the section you want to be sticky, so the effect is that the next section underneath scrolls / overlaps the first section

section[data-section-id="6553bddea684286457fd7144"].page-section {
position: sticky!important; 
top: 0px!important;
  z-index:0;
} 

 

 

Hey @tuanphan This code appears to glitch in safari, is there a reason do you think for this ? 

On 12/14/2023 at 6:22 PM, daniellenoakes said:

Hey @tuanphan This code appears to glitch in safari, is there a reason do you think for this ? 

Try this

section[data-section-id="6553bddea684286457fd7144"].page-section {
position: sticky!important; 
top: 0px!important;
  z-index:0;
position: -webkit-sticky;
} 

On 12/16/2023 at 3:40 AM, tuanphan said:

Try this

section[data-section-id="6553bddea684286457fd7144"].page-section {
position: sticky!important; 
top: 0px!important;
  z-index:0;
position: -webkit-sticky;
} 

 

thanks @tuanphan, however it's still glitching out on safari even with that added in!