Jump to content

Make image sticky while scrolling down on blog page

Recommended Posts

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!

 

Edited by ChloeCL
wrong url
Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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. 

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

Link to comment

Have you changed/deleted the page?

I can not access it at the moment

image.thumb.png.5cdd30e062908e5b1ee195dd40a8df99.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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.