Build a sticky aside in Webflow

How to create a sticky menu that stays put as visitors scroll.

No items found.

Offering share links and other articles to your visitors is always a good idea — especially for a blog. In this tutorial, we’ll create a sticky menu that sits beside the main content of a blog post and stays with visitors as they scroll.

Here’s a live demo of the sticky aside we’re going to build.

Step1: Add the CSS snippet

Begin by placing an HTML embed widget on the canvas and paste the following CSS snippet inside the modal window:

<style>

.sticky-aside {
 position: -webkit-sticky;
 position: sticky;
}

</style>

Note: You can put this snippet in the Header Custom Code section in project settings, but you won’t be able to see the effect unless you’re on the published site.

Step 2: Add the menu and content

Place a Container on the canvas and within the container place a Div. Give it a class of “Flex Row” with the following settings:

Display: Flex, Horizontal, Justify: Left, Align: Top

Place another div inside the newly created flex row and give it a class of “Main Col” with the following settings. This is where your page’s main content will go.

  • Flex Item: Expand
  • Padding (Right): 50px
  • Max Width: 70%

This is a good time to add content. In our case we have some dummy blog post content, but of course you can use this as part of your CMS powered site.

Add another div beside the Main Col div, and give it a class name of “Sticky Aside” with these settings:

  • Position: Absolute, Top
  • Min Width: 30%

This is where you’ll put the content you always want in view. We’ve added a search bar, three of the latest blog posts, and social share buttons — you can put whatever you want in yours. A breakdown of how to style the elements added to the aside menu will need to be saved for another day.

Publish and test it out!

Step 3: Smooth it out with interactions

If your website has fixed navigation like my demo site, then you’ll probably find the sticky aside gets caught behind it. To fix this and add a little bit of pizazz, we’re going to add some interactions!

Open the interactions panel and, in the On Current Page section, click the plus icon. Select While Page is Scrolling from the dropdown menu.

Design interactions and animations without code

Build complex interactions and animations without even looking at code.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Start animating

In the On Scroll section, select “Play Scroll Animation” from the dropdown menu. Change the smoothing to 90% and click on the plus icon.

Name the interaction “Move Aside on Scroll,” navigate to the canvas, and select the Sticky Aside element. On the interactions panel, click the 0% marker and select the “Move” action from the dropdown menu.

On the first instance set the Y Axis to “0px.”

At 100%, select and change the Keyframe to “14%.” In my example I’m moving the Sticky Aside down by 90px, but you may have a larger header or navigation to clear. You can experiment with how far you need it to travel.

Done! Publish and test!

Published

January 30, 2018

Category

Tutorials

Join the conversation

What's Webflow?

Try it for free
More about the Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Build website interactions and animations visually.

More about Interactions

CMS

Define your own content structure, and design with real data.

More about the CMS

Ecommerce

Goodbye templates and code — design your store visually.

More about Ecommerce

Editor

Edit and update site content right on the page.

More about the Editor

Hosting

Set up lightning-fast managed hosting in just a few clicks.

More about Hosting