Sticky Section with Horizontal Scroll

Hi everyone,

I’ve seen the question been asked numerous times in the last past week, so I took a little time to craft a solid, responsive solution using only Webflow CSS and IX2 for a horizontal scroll inside a Sticky section, with the scroll resuming at the end of the horizontal scroll.

I added a few other details to the structure, such as the parallax background.

It’s clonable, start here: http://horizontal-scrolling-sticky-section.webflow.io/

Show us what you made with it!

25 Likes

Thanks very much @vincent. Smooth as on an iPad running chrome. Look forward to trying this.

1 Like

Thanks for the “same width” suggestion, will definitely keep this in mind. It actually makes perfect sense now that scrolling would feel the most natural in such an instance,I think I never thought about this before.

You’re welcome. Horizontal scrolling that feels like a scroll hacking gives a very bad UX I think. Another advantage here is that the scrollbar gives the right sense of the length of the page, even if the “length” is distributed partially horizontally and vertically.

The same system allows for anchors link smooth scrolling horizontally. You just have to intelligently position elements down to tall section, give them IDs, and target them. Your site will horizontally smooth scroll to their horizontal content counterpart. I want to add anchors on this template soon.

1 Like

Thanks for taking the time @vincent !

Thanks @vincent this is a great help and actually inspires so many possibilities.

Example: Rather than having the colored contents of the horizontal div all be visible, could you mask them only showing the center box as it comes through the mask’s viewport? …then…inside those colored boxes have a different frames of the same moving image so as you scroll through them and they pass horizontally, the user creates the ‘moving picture’ effect?

1 Like

hello @vincent

  1. do you also now how a sticky menu can become smaller after a while scrolling please look to www.deme-group.com

  2. can a sticky navbar also disappear into webflow look to language nav into www.energy-observer.org

thanks to help me out to make a clonable project
Karel

Ambitious but technically feasible. I don’t know about recreating an animation effect with it though, you need min 10 im/second to get a animation effect, that’s a lot of cards to deal with, large dimensions for elements, lots of testing. A video/after effect proof of concept is required.

1/ That’s fairly easy, this is mixing the sticky technique with just another IX bound to a “scrolling into view” trigger. So when a certain object enters the viewport, it makes the menu shrink.
2/ exact same technique

1 Like

thx Vincent
so please can you make an example…

  1. scrolling smaller height after 400vh?
  2. disappear after scrolling 300vh?

thx to show me a loom printscreenvideo how it works exactly
Karel

I’m sorry no I don’t have that time. I outlined the process in my previews message, please give it a try first. The site I made and shared here is using the exact same trigger, please clone the site and explore. Come back for more help :slight_smile:

Hello Karel! Vicent is kind of a superstar here in Webflow , so I’ll try to help you because he’s a busy guy. It’s not gonna be as good as if it was him teaching you, but here it goes.

  1. Let’s suppose you already have your sticky navbar all set up. Current properties:
  • It sticks to the top of the page
  • Current size 100px.
  • The sticky navbar is currently between a “hero section” and “About me” Section.
  1. If you want the navbar to reduce its height to (let’s suppose 60px) after it hits the fourth section of your page (Let’s suppose it’s called “Contact Session”). You’ll need to do the following
  • Add an element trigger to the CONTACT SESSION. That should be a "scroll into view " animation.
  • Now you’ll create the timed animation that’s going to reduce the Navbar Height.
  • At 0.00s, Select your navbar and select size in the timed actions menu and set the height to 100px. Check the “Set as initial state” checkbox on the bottom.
  • With your navbar still selected, add a new TIMED ACTION, selecting size again and make the Height 60px. Tweak how the animation will behave as you wish (Easing and duration).

That should be enough for the “size reduction” animation that you asked

  1. To make it disappear after a certain point, grow bigger, or any other kind of change, the process is exactly the same, but instead of affecting its size, you should affect its opacity and/or hide/show settings for example.

  2. You should do minor tweaking so the animations look smooth and nice.

I hope I made it clear.

I hope you find it useful. Have a great day my friend.

3 Likes

thanks a lot,
I also worked out the workflow to add 2 scrollable sections
https://preview.webflow.com/preview/karelrosseel-test-for-google?utm_source=karelrosseel-test-for-google&preview=4fc38c581e6706ce906f81bbb1d8befc
Is this correct?
Thanks to view this project (School was at Google Atelier Brussels with 2 workshops)

question about the filling up of the picture… how do you do that?

Also if I want to make a new content: the same elements get the same background: also when i change the classname to content2.

what do I do wrong?

Thanks to help me out
Karel
Note: also a problem for showing the button of a background image has a problem into the new style menu… did you know about that?

![the%20same%20content|684x500]

waauw thanks, what I do I make a new project with a new emailadress so you can show a free demo webflow site…

Greetings
Karel

I currently don’t have my computer with me , so I’m not going to extend my reply so much.

Buuuut : for the most of the problems you mentioned above , you can easily solve them by using combo classes instead of renaming . (renaming doesn’t do anything but change the name of the existing class). You can learn more about the combo classes through the tutorials available in the webflow website.

For others inquiries, I recommend you to create a new forum post, because this one is not meant for troubleshooting.

@Jeandcc thanks to help me: if figured out ‘gradient’ has as combo class 1-2-…
I have a new problem:
I created this topic:
Sticky scrolling while working with mega menu: issues

Hey guys, this is really cool! Thank you @vincent for taking the time. I went ahead and cloned it and am trying to do something, maybe you can help me out.

Would it be possible to make the first element of the scrollable content start from the center of the screen instead? (attached image) I made that by pulling up the left margin of the content div, and it kind of works, but it’s such a “by eye” solution that can’t be scalable to different resolutions. Is there a way of making it happen automatically responding to the resolution of the screen?

  1. This one is more like a bug but do you know why the H1 sticky header disappears when you scroll? it kinda flickers or simply goes away when I scroll. I tested different browsers and it still does, but I just can’t figure out why.

    Any help would be really appreciated.

Stay awesome!

Public link: Webflow - Resourceful Humans

1 Like

On your site, or on my demo?

Do you mind sharing your site’s read-only link please?

1 - On your site’s dashboard, click the Share icon:

http://vincent.polenordstudio.fr/snap/nqmwm.jpg

2 - Generate and Copy the link:

http://vincent.polenordstudio.fr/snap/gpto0.jpg

3 - Then edit your post here, and paste the link inside.

1 Like

Hi Vincent Thank you for your reply and for checking this.
The flickering is only happening on Chrome Version 72.0.3626.96 (Official Build) (64-bit). I just tested on Microsoft Edge and Opera and it doesn’t happen.
I just edited my post and it now has the public link. :+1:t4:

Here. A rough capture. It happens in both your demo and my site: