How to Fix Div Until Horizontally Scrolled To End?

[cosmic yoke]

Okay, I'll admit this isn't quite an Astro question, but if you take a look at this website:

https://gsap.com/

...if you scroll down, there is a div that once you scroll down to it, the div becomes fixed on screen and scrolls through its elements horizontally. Once you get the end of the div's horizontal content, the div stops being fixed and the user can scroll further down through the page.

• How do I detect when to make the div fixed and start scrolling through horizontal content?
• How do I make it such that when I scroll to the end of the horizontal content, the div is no longer fixed and I can scroll down to the rest of the page?

Please let me know what I should do. I'm using Astro.js with JS, and HTML and CSS.

I just installed GSAP to my website code as well so if there is a solution involving that, I'd appreciate it--but I think it should be possible using CSS and JS

[subtle heart]

you can probably do something with the scroll event and check the scroll status of the div!

https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event

like, check if the div is at the top of your screen (somehow), then change the scroll direction (somehow), then change it back when you reach the end of the div?

Never done it before and I have no clue how, but I hope this can be a good starting point!

[cosmic yoke]

Nvm, it turns out GSAP has a method to do that! https://gsap.com/scroll/

@subtle heart Do take a look at this at your earliest convenience, this looks really cool ^_^

The ScrollTrigger allows you to do that

[subtle heart]

Ooh, I'll try it some day! Thank you for letting me know :)

[cosmic yoke]

Npnp, my site is a bit of a mess as I'm using Astro.js, Floating-UI, GSAP, Bootstrap & Three.js