All docs Layout & design

Creating
a sticky
sidebar
Create a sticky sidebar
using position sticky.

Table of contents
We’re transitioning to a new
UI, and are in the process of Creating a sticky sidebar
updating our Webflow Setting position sticky
University content.
Troubleshooting position sticky

Creating a sticky sidebar — Web…

Web…
In this lesson:
1 Using position sticky
2 Troubleshooting position sticky

Setting
position
sticky
Position sticky alternates the position of an
element between relative and fixed based
on the viewer’s scroll position. A sticky
element is relative to the document flow
until a defined scroll position is reached,
then it switches to behaving like a fixed
element within its direct parent. Once, the
sticky element hits the bottom of its
parent, it doesn’t scroll past it.
 Style panel → Position → Position → Sticky

1 With the sidebar selected,

apply position sticky in the Style
panel. You'll notice that if you scroll,
the sidebar doesn't stick! It remains
in its natural place in the document
flow. That's because we didn't define
a distance yet.

Note
You must specify at least one position
value for the top, bottom, left, or right
side for sticky positioning to work. This
depends on where your element is
positioned within the parent and how
you're scrolling, vertically or
horizontally.

1 Define a distance from the top. Set

the top value to 0px if you want the
 sidebar to stick to the top of the
page, or set another value, say 30px,
to make it stick to the top of the
page with a distance of 30px from
the top. Now, when you scroll, the
sidebar should stick to the page as
long as you're scrolling within the
container, the direct parent, of the
sidebar.

Troubleshooting
position
sticky
Sometimes, position sticky won't work
even though you've set the position to
sticky and defined a distance value for one
of the sides of the element. That can
happen for many reasons:
Position sticky will most probably not
work if overflow is set to hidden, scroll, or
auto on any of the parents of the
element.
Position sticky may not work correctly if
any parent element has a set height.
Many browsers still do not support sticky
positioning. Check out which browsers
support position: sticky.
Position sticky may also not work if the
position distance value is set on a side that
isn't affected by the scrolling. For example,
if you set the distance on the left or right,
and you're scrolling through the page
vertically, the element won't stick. Another
example would be if you've set a distance
to the bottom, for instance, instead of the
top and your element is aligned to the top
of the parent — it's either the first element
in the parent or aligned to the top with flex
or grid alignment settings.

To keep the sidebar sticking to the bottom of

the page, define a bottom value and change
the alignment of the sidebar if it's a flex child or
a grid child.

Continue learning
Search Filter Reset

Add a Spline Layout Popular

scene to your &
Webflow site design Micro lesson
Build a Includes video
locale Localization
switcher TOPICS
Localize Getting started
content Localization
and styles Elements
VariablesLayout
design
& Layout & design
Logic
Control text Layout Interactions & animations
wrapping and & CMS & dynamic content
line breaking design
Building web Layout & Ecommerce
layouts design Hosting & code export
DevLink in the Layout & SEO
Designer design Accessibility
Text Layout & Templates
stroke design Site settings
Small, large, and Layout Workspaces & billing
dynamic &
Users
viewport units design
Integrations
Wrap element Layout
in div or link & Collaboration
block design Localization
Figma to Layout & Apps
Webflow design
plugin
Variable Layout &
fonts design
Semantic Layout &
HTML5 tags design
ComponentsLayout
design
&

LibrariesLayout
design
&

Page Collaboration
branching
Set a default line Layout
height for your &
entire site design
Webflow for Layout &
creators design
Color picker Layout &
overview design
Toggle
play/pause on Layout
background &design
videos
Clip content Layout
using blending &
modes design
Collaborate in Layout
the Webflow &
Designer design
Basic math in Layout
the Style panel &design
Style labels in Layout &
the Designer design
OutlinesLayout & design
Backdrop Layout &
filters design
Blending Layout &
mode design
Advanced text Layout
highlight using &
inner shadow design
Find and Layout &
clean styles design
Legible
paragraphs Layout
using the CH &design
unit
Custom
gradient Layout design
&
border
Clip image to Layout &
text span design
Testing multiple Layout
device widths &
between
breakpoints design
Overflow: Layout &
hidden design
Ensure your text Layout
meets color &
contrast design
standards
Horizontal Layout &
scrolling design
Image Layout
magnification &
on hover design
Text fills Layout & design
Neumorphic Layout &
button design
Enable 3D Layout &
elements design
Navigate Layout &
using arrow design
keys
Quick Layout &
duplication design
Style first, last, Layout
odd, even items &
in your CMS design
Build a pop-up Layout
with fixed &
positioning design
Advanced Layout &
web
typography design
Advanced Layout
borders on the &
web design
Apply a z- Layout &
index value design
Background Layout &
styles design
Box Layout &
shadow design
Build a grid- Layout
based &
Instagram design
gallery
Build a sticky Layout
footer using &
flexbox design
Build flip cards Layout
with transforms &design
CSS position Layout &
properties design
CSS width Layout &
and height design
Center Layout
elements with &
flexbox design
Classes Layout & design
Color values Layout
(hex, rgba, color &
names) design
Combo Layout &
classes design
Create a Layout
custom
preloader in &design
Webflow
Create an Layout
accordion &
dropdown design
arrow
Create Layout
gradient &
backgrounds design
Create shapes Layout
by styling the &
border radius design
Create a Layout &
custom
accordion design
Create a Layout &
fixed navbar design
Creating a Layout &
sticky sidebar design
Custom
dropdown Layoutdesign
&
menu
Design for Layout
larger displays &
in Webflow design
Display Layout &
settings design
Effects Layout & design
Enable Layout &
relative
position design
Equal height Layout
layouts with &
flexbox design
Exaggerate Layout
depth using Z- &
scale design
Filters Layout & design
Flexbox Layout & design
Flexbox vs grid Layout
vs Quick Stack &design
Fractional unit Layout &
overview design
Grid Layout & design
Grid Layout &
areas design
HTML Layout &
tags design
Hide elements Layout
on different &
breakpoints design
Horizontal Layout
movement on &
scroll design
Inline text Layout &
formatting design
Input values Layout &
and units design
Interpolation, Layout
easing, and &
smoothing design
Intro to Layout &
breakpoints design
Intro to
responsive Layout
design
&
design
Layouts on Layout &
the web design
Legacy
Interactions
1.0 Layout &
design
OpacityLayout & design
Overlap content Layout
in a responsive &
grid design
Override the Layout
default cursor &
for elements design
Parallax Layout
movement on &
scroll design
Pin a button to
the bottom of a Layout
form using &
absolute design
position
Quick effects Layout &
overview design
Remove
whitespace Layout
between inline- &design
block elements
Responsive Layout &
images design
Set
background Layout
design
&
images
Spacing Layout
(margin and &
padding) design
Span grid Layout &
content design
Starter Layout &
Library design
 Load more

Product Company Explore Social

Designer About Marketplace
© 2023 CMS Careers WE'RE
HIRING
Libraries BETA
Webflow,Ecommerce Apps Become a Partner
Inc. Press
All rights Interactions Merch store Hire an Expert Become an Expert
reserved SEO Templates Become a Template Designer
Accessibility
Editor statement Made in Become an Affiliate
Webflow
Hosting Terms of
Service
DevLink LABS Get help
Privacy policy Learn
Figma to LABS
Webflow Cookie policy University Support
Security Cookie Pricing
preferences Blog Status
Accessibility Customers
Sitemap Forum
Feature index Resources
Wishlist
Community
Solutions
Compare Developers
Freelancers and
Webflow vs agencies No-Code
WordPress movement
Enterprise
Webflow vs Glossary
Squarespace Startups
Webflow vs Classrooms
Shopify