Discover the best sticky-navbar websites created by professional designers. Get inspired and start planning your perfect sticky-navbar web design today!

A sticky scrolling component that uses interactions to highlight a few features while you scroll past. It also allows the user to click any of the titles to anchor scroll and to that specific feature.

Sticky Scroll Feature Section

I found Duncan Hamra's solution (https://webflow.com/website/Sticky-On-Scroll) and recreated it using CSS only.

This setup should work on all modern browsers as far as I'm aware. I used CSS Grid for alignment which won't work on older browsers.

Sticky on Scroll by Wilson

Sticky on Scroll with Pure CSS

Let's get STICKY

lets-get-sticky-scroll-effect

This project will show you how to simply hide your navbar when scrolling down on a page and revealing it again while scrolling upward. You can see the scroll upward interaction uses a slight offset so it's not triggered without intention or by accident. 

You are welcome to clone this project and use it. It's a simple interaction but in my opinion a very useful one and feels a bit more high end. Great for having navigation on your website when you need it yet without it getting in the way.

Hide/Reveal Nav On Scroll

A small landing page with 2 rows navbar.
One stays at the top of the screen while 2nd is sticky and scrolls with you.

2 rows Navbar

2 Rows Navbar

grid navigation menu

grid-navigation-menu

The project was made to help a forum question > https://forum.webflow.com/t/anyone-know-how-to-do-this/76693

Sticky Sidebar

Sticky sidebar nav

Hi fellow Webflowers!

In this cloneable you will find a custom navigation including a dropdown for a submenu. For the dropdown you will find one desktop animation and a separate mobile animation. Further more you will find a scroll animation for the navigation bar, that is made with just some lines of custom code.

Check out the tutorial to watch how I build this navigation step by step.

Sticky Navigation with Custom Scroll Animation

[TUTORIAL] Sticky navigation with custom scroll animation

A modern navigation bar styled with inspiration from glassmorphism. Animated to show and hide upon user scroll.

I'm available for hire: forsjonathan.com

Snickersnee

Animated sticky navigation bar – Glassmorphism

I wanted to create a vertical sticky "sliding" section header and initially had some problems with it to make it work smoothly. After some fiddling around I came up with the current solution which does exactly what I wanted.

Discover sticky navbar websites built by the Webflow community

Discover sticky navbar websites built by the Webflow community