Horizontal Scroll Sticky Interaction

Hi there,

I’m currently building a website for a restaurant and for the menu page, I’m working on a sticky section that horizontally scrolls to showcase the different dishes that are on offer. I’ve successfully set up the interaction which works as intended, however, because the section is only 50vh, I’m left with a large blank space (see image 1). Once scrolled through the section, the following menu items scroll up and stick, then to be scrolled through themselves. If possible, I’d like the blank half of the screen to be filled with the section of the menu that follows, removing the blank spaces altogether (see image 2). I’d be grateful for anyone that could assist me with this.

Many thanks,
Sam


Publish link: https://amazing-thai-at-the-white-hart.webflow.io/

Read-only link: https://preview.webflow.com/preview/amazing-thai-at-the-white-hart?utm_medium=preview_link&utm_source=dashboard&utm_content=amazing-thai-at-the-white-hart&preview=7f9fdae6875d712cd4835c674026a654&workflow=preview


Here is my public share link: LINK
(how to access public share link)