Image floating within section

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.

Hi,

Do you know an example site? We can imagine easier