Sticky text block and button

Site URL: https://moreours.squarespace.com/work-copy

Hi there! 

On this page, I’m hoping to have the text box and button stay fixed in place, with the gallery of images scrolling behind it all, until you reach the footer (the text and button should then be able to scroll up when you get to the footer). I know this has to do with sticky and fixed positioning, but my knowledge around that is very limited. I’m using the new Fluid Engine on this page.

pw: pearl

1 hour ago, sarahrab said:

Site URL: https://moreours.squarespace.com/work-copy

Hi there! 

On this page, I’m hoping to have the text box and button stay fixed in place, with the gallery of images scrolling behind it all, until you reach the footer (the text and button should then be able to scroll up when you get to the footer). I know this has to do with sticky and fixed positioning, but my knowledge around that is very limited. I’m using the new Fluid Engine on this page.

pw: pearl

You can try

section[data-section-id="62d1baa89681d775e15dd828"] .fe-block-62d1baa88fc4ddf80b4753d5 {
  position: sticky;
  top: 100px;
  z-index:99;
}

Hope it helps

10 hours ago, bangank36 said:

You can try

section[data-section-id="62d1baa89681d775e15dd828"] .fe-block-62d1baa88fc4ddf80b4753d5 {
  position: sticky;
  top: 100px;
  z-index:99;
}

Hope it helps

@bangank36

Thank you, that does work!! It's all perfect until I get to the footer. At the bottom, the button starts to move on top of the text. How can I maintain the space between the text and the button for the entire time?

You can try changing the top value of the button until it meets your requirement.

My testing is fine with

top: 720px

On 7/16/2022 at 9:12 AM, bangank36 said:

You can try changing the top value of the button until it meets your requirement.

My testing is fine with

top: 720px

@bangank36 Hm, that's not working for me. I've changed the top value so that it works perfect throughout the entire scroll, but once I get to the bottom, it overlaps the last line of the text, like the screenshot here. I've tried changing the value up and down, including to 720.  

6 hours ago, sarahrab said:

Hm, that's not working for me. I've changed the top value so that it works perfect throughout the entire scroll, but once I get to the bottom, it overlaps the last line of the text, like the screenshot here. I've tried changing the value up and down, including to 720.  

Try adding grid-row-end to this code

section[data-section-id="62d1baa89681d775e15dd828"] .fe-block-62d1baa8d1eb62e0a009f0c3 {
    position: sticky;
    top: 230px;
    z-index: 99;
    grid-row-end: 16 !important;
}

Thank you!!

For my site, the sticky button is there but something is wrong with the z-index.

Check out this page
https://www.altarealestate.sg/featured-listings

This is the CSS code

{
  position: fixed;
  z-index: 9999;
  bottom: 3%;
  right: 3%;
  width: 65px;
  height: 65px;
}

On 6/3/2023 at 9:38 PM, EssaArissa said:

For my site, the sticky button is there but something is wrong with the z-index.

Check out this page
https://www.altarealestate.sg/featured-listings

This is the CSS code

{
  position: fixed;
  z-index: 9999;
  bottom: 3%;
  right: 3%;
  width: 65px;
  height: 65px;
}

Which button are you referring to?