Jump to content

Sticky Section

Recommended Posts

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

Screenshot 2022-12-04 at 12.34.16 PM.png

Link to comment
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.

image.thumb.gif.f2c1e2fb60c82e0ebb9c16a6e7173faf.gif

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
24 minutes ago, BlayneG87 said:

Just curious what browser you are using?

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

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;
  
  }

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@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. 

Link to comment
  • 8 months later...
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 months later...
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

Link to comment
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 ? 

Link to comment
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;
} 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.