Fixed text blocks when scrolling?

Site URL: https://www.nicolelelacheur.com/

Hi there! I'm trying to make the next block on the left sticky/fixed so it stays in position while the images on the right scroll. I'm trying to eventually do this on all the work sample pages in my portfolio. Can someone help me find the best code? Thanks so much.

Here's the page I'm referring to: https://www.nicolelelacheur.com/work/kodiak

Hi nicolel824 Yes we can create this effect via custom CSS code
In custom code you need to use Position Sticky to get this effect.
like 
.element {
 position: sticky;

top: 0;
}

If you need further assistance you can contact me.

@Agha_Waqas

I am trying to do this exact thing with a custom code block and can't get it to work. I made this locally on my computer to test it before plopping it in but it's not working. Can you please take a look and see if what I'd doing wrong?

Heres the website
I'm trying to do this in the black section down where it says "Let's make your website dreams come true"

I'm trying to make the text on the right stick while you scroll through the work on the left (I havent added the work yet, just trying to make the sticky work right now)

@Agha_Waqas

its so odd, if I try the sticky bit on a regular page (not on an index page) it works just fine? So I am so confused by that. @squarespace why is this happening?!?!

https://naomichan-portfolio.squarespace.com/stickyexample

On 4/1/2021 at 11:36 AM, dearnaomichan said:

@Agha_Waqas

its so odd, if I try the sticky bit on a regular page (not on an index page) it works just fine? So I am so confused by that. @squarespace why is this happening?!?!

https://naomichan-portfolio.squarespace.com/stickyexample

Hi. The url doesn't exist. Can you check it again?

This css is not working for me either. I added:

#block-yui_3_17_2_1_1685550787283_1963 {
 position: sticky;
    top: 0;
  color:red;
}

I know I have identified the text block correctly because it turned red. But it still scrolls with the rest of the page. What am I missing? thanks

Dan

On 6/1/2023 at 12:29 AM, DanT said:

This css is not working for me either. I added:

#block-yui_3_17_2_1_1685550787283_1963 {
 position: sticky;
    top: 0;
  color:red;
}

I know I have identified the text block correctly because it turned red. But it still scrolls with the rest of the page. What am I missing? thanks

Dan

 

Can you share link to page? We can check easier