A sticky sidebar keeps useful content, like a table of contents, a call to action, or an email opt-in, visible as a visitor scrolls down a long page. Without it, that content disappears above the fold within the first few seconds and most visitors never see it again. Divi has a built-in sticky option that handles this without any CSS or JavaScript, but there are a few settings that most tutorials skip over, and skipping them is exactly why sticky sidebars break on long pages, overlap the footer, or vanish on mobile. This tutorial walks through the full setup and the specific fixes for each of those failure points.
This is the second part of a two-part series. The first part covers how to build a table of contents in Divi without a plugin. If you already have a sidebar element built and just want to make it sticky, you can jump straight to Step 2.
How Divi’s Sticky Option Works
Divi’s sticky feature is built into the Scroll Effects option group, which lives under the Advanced tab on any section, row, column, or module in the builder. When you enable it on an element, that element pins to a fixed position in the viewport as you scroll, while the rest of the page content continues scrolling normally underneath it.
The setting you choose determines the starting behavior. The most common option for a sidebar is Stick to Top, which keeps the element anchored to the top of the viewport once the user scrolls past it. You also set a Top Offset in pixels, which is the gap between the top of the browser window and the top of your sticky element. This matters if you have a sticky header, since without an offset, your sidebar will slide up behind the header and get partially hidden.
Separately, a Bottom Sticky Limit controls where the element stops being sticky. This is the setting almost nobody touches, and it is the root cause of the most common sticky sidebar problem: the sidebar continuing to stick all the way through the footer because nothing told it to stop.
Step 1: Set Up Your Sidebar Column
Your sidebar needs to live in its own column, side by side with your main content column inside the same row. If you are adding a sticky sidebar to a blog post template in the Theme Builder, this means a two-column row: one column for the post content and one column for the sidebar.
Where to find this: Inside your Blog Post Template in Divi > Theme Builder, add a Row with two columns. Put your main content modules in the first column and your sidebar content, TOC, CTA, or whatever you are stickying, in the second column.
The sidebar column does not need any special sizing settings to make sticky work. Standard column proportions are fine, for example a 2/3 and 1/3 split for content and sidebar respectively.
Step 2: Enable the Sticky Position
Where to find this setting: Click on your sidebar column to open its settings, go to the Advanced tab, then scroll down to Scroll Effects.
Set Sticky Position to Stick to Top. This is the setting that activates the sticky behavior. Once you select it, a few additional fields appear below it.
Sticky Top Offset: Set this to match your sticky header height, if you have one, plus a small buffer. On my own site, with a sticky header roughly 120px tall, I use 150px. This keeps the top of the sidebar from sliding under the header as it sticks. If you do not have a sticky header, a small value like 20px or 30px is enough to give the sidebar a bit of breathing room from the top of the screen.
Offset From Surrounding Sticky Elements: Leave this toggled on. This prevents the sidebar from stacking on top of any other sticky element already in the viewport, like a sticky header. With it on, sticky elements stack below each other rather than overlapping.
Transition Default and Sticky Styles: Leave this on too. It adds a smooth animation when the sidebar transitions into and out of its sticky state, which looks cleaner than a hard snap.
Step 3: Set the Bottom Sticky Limit
This is the most important setting and the one most tutorials leave out entirely.
Where to find this setting: Still inside the sidebar column’s Scroll Effects, look for Bottom Sticky Limit directly below Sticky Top Offset.
By default this is set to None, which means Divi has no instruction for when to stop sticking. The sidebar will keep sticking indefinitely as the visitor scrolls, right through your footer content, and on a long page with a long table of contents, it will eventually either overlap the footer or get visually cut off against the viewport boundary with no clean stopping point.
Set this to Row. This tells Divi to stop the sticky behavior once the sidebar reaches the bottom edge of the row it is sitting inside, which is exactly where your post content ends. The sidebar sticks cleanly through the post, and when the visitor reaches the footer, the sidebar releases naturally and scrolls off screen the same as any normal element.
A note on the other options: Section stops the sticky behavior at the bottom of the section rather than the row. Depending on how your template is structured, this may produce the same result as Row, or it may stop the sidebar slightly earlier if your content and sidebar live inside a section that ends before the page footer. Row is the more precise boundary in most two-column blog layouts. Body is the most permissive option and essentially lets the sidebar stick until the very end of the page, which is what causes footer overlap and is what you want to avoid.
When should you use a sticky sidebar?
- Table of Contents
- Newsletter signup
- Contact CTA
- Affiliate banner
- Related posts
- Download button
Step 4: Fix Mobile Behavior
Sticky sidebars on mobile are a separate problem. On narrow screens, a two-column layout with a sticky sidebar usually stacks the columns vertically, which means the sidebar ends up either at the top or the bottom of the page instead of beside the content. A sidebar that was sticky beside the content on desktop becomes a long block of content stacked above or below everything else on mobile, and keeping it sticky there would be visually intrusive.
Where to find this setting: With the sidebar column still selected, look at the responsive controls at the top of the Scroll Effects panel. Divi’s sticky options are responsive, meaning you can set a different Sticky Position value per breakpoint.
Switch to the tablet and phone views in the builder, then set Sticky Position to Do Not Stick for both. This disables the sticky behavior on smaller screens entirely, so the sidebar just flows normally in the stacked layout rather than trying to pin to the viewport in a context where it does not make sense.
Common Reasons Sticky Sidebars Break
If you have followed the steps above and the sticky behavior is still not working or behaving unexpectedly, here are the most frequent causes:
The parent container has overflow: hidden set. CSS overflow: hidden on a parent section or row prevents sticky positioning from working, since the browser clips the element’s position to the container. Check your section and row Design settings for any clip or overflow controls, and remove overflow: hidden if present. This is also sometimes added by third-party plugins or custom CSS, so worth checking in the browser inspector too.
The sticky element is inside a nested row or container. Divi’s sticky options work best when the sticky column is a direct child of a standard row, not nested several levels deep. If your sidebar column is inside a nested row inside another row, the Bottom Sticky Limit boundary detection can fail.
Column heights are not equalized. If the content column and the sidebar column are different heights and equalize column heights is not enabled, the sticky behavior can end earlier than expected or not engage at all, since the row’s boundary gets calculated incorrectly. In your row settings, under Design, check that Equalize Column Heights is enabled.
A caching or page speed plugin is deferring Divi’s scripts. Some caching setups delay JavaScript execution, and Divi’s sticky behavior is script-driven. If the sidebar was working and then stopped after installing a caching or performance plugin, check whether Divi’s scripts are being excluded from deferral in your plugin’s settings.
Frequently Asked Questions
Why does my sticky sidebar overlap the footer?
The Bottom Sticky Limit is almost certainly set to None or Body. None gives Divi no stopping boundary at all, so the sidebar sticks indefinitely. Body stops the sidebar at the very end of the page, which still causes overlap with a footer that appears before the page technically ends. Setting Bottom Sticky Limit to Row stops the sidebar at the bottom of the content row, which sits above the footer.
Why does the sticky sidebar not work on mobile?
On mobile, a two-column layout usually stacks vertically, putting the sidebar above or below the content rather than beside it. Sticky behavior in that stacked context is usually more disruptive than helpful. The fix is to switch to the tablet and phone views in the builder and set Sticky Position to Do Not Stick for those breakpoints, so the sidebar flows normally on smaller screens.
Does this work for any sidebar content, or only a table of contents?
The sticky setup is entirely independent of what you put inside the sidebar column. Any Divi module, a CTA, an opt-in form, an image, a text block, or a TOC, can be made sticky using the same column-level Scroll Effects settings described in this post. The content inside the column does not affect the stickiness behavior.
My sticky sidebar worked and then stopped after a plugin update. What happened?
The most likely cause is a caching or performance plugin that started deferring JavaScript after the update. Divi’s sticky behavior depends on scripts running at page load. If those scripts are deferred or delayed, the sticky state may not initialize correctly. Check your plugin’s exclusion settings and make sure Divi’s main scripts are excluded from deferral.
