Pin image while right side scrolls normally

Hello! I'm trying to pin the image on the left of the 'Personal Chef Service' page on this Squarespace site (password is F2FC-website). I tried using the pin feature, but if you click on the 'sample meals' accordion, the image stops being sticky halfway. I want it to look something like this where the left stays sticky until it reaches the bottom of the section. 

I also tried doing it by assigning the block a sticky position, a top 0, and giving it a high index, but that make the image sticky. Thanks in advance!! 🙂

On 6/23/2024 at 4:55 PM, bellapette said:

Hello! I'm trying to pin the image on the left of the 'Personal Chef Service' page on this Squarespace site (password is F2FC-website). I tried using the pin feature, but if you click on the 'sample meals' accordion, the image stops being sticky halfway. I want it to look something like this where the left stays sticky until it reaches the bottom of the section. 

I also tried doing it by assigning the block a sticky position, a top 0, and giving it a high index, but that make the image sticky. Thanks in advance!! 🙂

You can try the following custom CSS

@media (min-width: 768px) {
  .fluid-engine.fe-6670e3fcf8a2a50d251fea25 {
    overflow: visible;
  }
  .fe-block-yui_3_17_2_1_1718666425093_62183 {
    top: 20px !important;
  }
}

My testing

!Bump!

I am also looking for the CSS code for this, I've tried a few others that have been posted but it is sticky across the whole page. I just need 1 image to be sticky in the section it appears, while the other images/text continue to scroll. (Similar to this, where the slideshow starts and the text says "take your brand next level") 

Any help is appreciated :) 

On 7/6/2024 at 4:59 AM, danielasdreamland said:

!Bump!

 

I am also looking for the CSS code for this, I've tried a few others that have been posted but it is sticky across the whole page. I just need 1 image to be sticky in the section it appears, while the other images/text continue to scroll. (Similar to this, where the slideshow starts and the text says "take your brand next level") 

Any help is appreciated 🙂

I think you need to use 2 sections to do this, then use CSS code to make them side by side & make left section sticky

If you want to try this, you can add 2 sections and share link, I can give you code.

Thank you for your quick response and offer to help :)  

Site is https://dandelion-clover-9bb9.squarespace.com

 (pw: refind) 

It is for the section towards the bottom (where it says "elevate your brand", after "events & experiences") 

Right now I have it in one section, and I've attempted to use the code below to just sticky the gallery block, but it doesn't seem to be working. I am not sure what I am doing wrong 🙃

I created 2 sections underneath the main one, in the event it is possible to split the screen to hold 2 sections. 

.fe-block-yui_3_17_2_1_1720124812375_214704 {
  position: sticky;
  top: 0;
  @media(max-width:767px){
    position: relative;
  }
}

Thank you for your help!! :)