Fixed\Sticky Navbar Sidebar Page Scrolling

Design help General
1

Hello All-

I need some help achieving the scrolling navigation design\layout found on the Webflow E-commerce page. https://webflow.com/ecommerce

It’s the section that begins with “Design” to “Sell” to “Grow.” The navigation is fixed on the left as the content scrolls on the right. The text changes font weights as it scrolls.

1.) What’s this technique called? Sticky\Fixed Navigation? Sticky Sidebar Aside? The correct term would be helpful for research and learning.

2.) Is a Navbar element used? Could this be achieved with a Text Link?

3.) Interactions? I think interactions are being used to shift the font weights as the page scrolls.

4.) Is there a video or article I could reference? I found some similar clones via the Showcase but they’re missing some features and elements. I’ve scoured the university; I’ve searched through the forums; I’m sure someone might have asked already- I just can’t find it.

I appreciate the help. I’m just a simple filmmaker trying to make my company site look cool and Webflow has many cool things on it’s pages.

Thanks.
Brian

2

Hello @insaaaane,

So the technique is called position sticky. It is a position attribute so you can apply it to pretty much anything you want. Interactions are used to change the fonts as the page scrolls. I think this could show you a little bit about position sticky Creating a sticky sidebar — Webflow tutorial - YouTube I hope this helps.

3

@insaaaane you can also take a look at this page and clone it, it uses position sticky but with a horizontal scrolling. http://horizontal-scrolling-sticky-section.webflow.io/