Make image sticky while scrolling down on blog page

Site URL: https://coolicon.squarespace.com/journal/bedroom

Hello, 

My blog articles have an image on the left, and text that goes with it on the right. I'm trying to have the image to stay in place while scrolling down the page to read the paragraph associated with that image on each blog post. Then once the paragraph is read, the rest of the page scrolls down. 

An example of a site that does what I want is https://www.kinfolk.com/erchen-chang-2/ . The first paragraph and image moving at different times is what I am trying to achieve. 

Can anyone help? Thanks in advance!

5 hours ago, ChloeCL said:

Site URL: https://coolicon.squarespace.com/journal-content/bedroom

Hello, 

My blog articles have an image on the left, and text that goes with it on the right. I'm trying to have the image to stay in place while scrolling down the page to read the paragraph associated with that image on each blog post. Then once the paragraph is read, the rest of the page scrolls down. 

An example of a site that does what I want is https://www.kinfolk.com/erchen-chang-2/ . The first paragraph and image moving at different times is what I am trying to achieve. 

Can anyone help? Thanks in advance!

 

You can try adding to Home > Design > Custom Css

@media only screen and (min-width: 768px) {
  body {
    overflow: visible;
  }
/*First image block*/
  #block-yui_3_17_2_1_1644327177946_41007 + .row  > .col:first-child {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
  }
}

Let me know how it works on your site

Thank you for your answer. I've added your code on my site, but it doesn't look like it changed anything. I've tried with both the block id you gave (the one for the line just above the image) and the block id for the image, and the results were the same. 

Same! code didn't work for me 💔

On 3/7/2022 at 3:48 PM, bangank36 said:

You can try adding to Home > Design > Custom Css

@media only screen and (min-width: 768px) {
  body {
    overflow: visible;
  }
/*First image block*/
  #block-yui_3_17_2_1_1644327177946_41007 + .row  > .col:first-child {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
  }
}

Let me know how it works on your site

Do you have another idea on how to achieve this?

Thanks!

Have you changed/deleted the page?

I can not access it at the moment

32 minutes ago, bangank36 said:

Have you changed/deleted the page?

I can not access it at the moment

Sorry, I forgot I changed the url in the meantime. Here's the new one: https://coolicon.squarespace.com/journal/bedroom