Jump to content

Image floating within section

Recommended Posts

Hey there,

I've been working on my website and came across a fascinating web design feature that I'd love to implement, but I'm not quite sure how to do it. I thought I'd reach out to the community here for some guidance.

What I'm looking to achieve is a unique scrolling effect with an image. In the second section of my web page, there's an image that I want to make "sticky." Here's what I mean:

  1. As visitors scroll down the page and the image comes into view, I want it to stay in one spot on the screen, right at the top of the browser window.

  2. When they reach the end of that section, the image should stop about 1 cm above the section's bottom.

  3. As they continue scrolling to the next section, the image should gradually move up, like it's following along with their scrolling action.

I've seen this on some websites and it creates a really cool visual effect. It's almost like the image is "locked" within that section.

I'm curious if anyone here has experience with this kind of effect and can offer some guidance or point me in the right direction. What kind of code or tools do I need to make this happen?

Any help or advice you can provide would be greatly appreciated! Thanks in advance for your expertise.

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.