Put the scrolling element inside a wrapper that ends before the footer, then apply position: sticky and a top inset. The sticky element remains in normal document flow, follows the viewport after reaching the inset, and can travel only as far as its containing block—so it stops when that wrapper ends.
Use a wrapper that ends before the footer
The footer must be outside the content region that contains the sticky element. A two-column layout makes the boundary explicit:
<main class="layout">
<article class="content">
<h1>Article title</h1>
<p>Long page content...</p>
</article>
<aside class="sidebar-shell">
<div class="sidebar">
Sidebar content
</div>
</aside>
</main>
<footer>Footer</footer>.layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
align-items: start;
}
.sidebar-shell {
align-self: start;
}
.sidebar {
position: sticky;
top: 1rem;
}As the page scrolls, .sidebar sticks 1 rem from the top of the viewport. It cannot escape .sidebar-shell; when that wrapper’s bottom edge is reached, the sidebar stops. Because the footer follows <main>, it is not covered by the sticky element.
Why position: sticky stops at the wrapper
Sticky positioning combines normal-flow and fixed-like behavior. Before the threshold is reached, the element occupies its usual place. Afterward, it is held at the declared inset within its scrolling container. The containing block supplies the lower boundary, so a wrapper whose content region ends before the footer provides the stopping point.
The wrapper also preserves the sidebar’s layout space. That avoids the jump that can occur when a script changes an element from normal flow to position: fixed.
Checklist when sticky does not work
Check ancestor overflow
Inspect every ancestor of the sticky element. overflow: hidden, overflow: auto, and overflow: scroll can create a different scrolling container. The sidebar may then stick relative to that container—or appear not to stick during window scrolling. Remove the overflow rule when it is unnecessary, or deliberately make that ancestor the container you intend to scroll.
Set a threshold
Provide an inset such as top: 1rem. Without a usable inset, there is no point at which the browser should hold the element.
Give the wrapper enough height
The sidebar’s wrapper must be taller than the sidebar itself and have enough content alongside it to create travel distance. If the wrapper is no taller than the sticky item, there is nowhere for sticky behavior to be visible.
Recommended Free Tools
Keep the boundaries together
Place both the sticky element and its shell in the same content region, and end that region before the footer. Moving the shell outside the main layout lets it continue farther down the document.
Account for the footer’s layout
Prefer a footer that remains in normal flow. A separately fixed footer can overlay the final part of the page; if you intentionally use one, reserve equivalent bottom space and test the sidebar at the footer boundary.
CSS sticky versus a JavaScript fallback
| Consideration | CSS position: sticky |
JavaScript scroll handler |
|---|---|---|
| Script dependency | None | Requires scroll and resize logic to run |
| Document flow | Preserves the element’s flow space | Changing to fixed positioning can make nearby content jump unless space is reserved |
| Changing footer height | Layout automatically supplies the new boundary | Measurements must be recalculated |
| Ancestor overflow | Sensitive to the scrolling container created by ancestors | Can measure a chosen container explicitly, but adds complexity |
| Compatibility | Best default for current browsers | Useful for older or unusual environments where sticky is unavailable or insufficient |
When a JavaScript fallback is justified
Older implementations measured the window scroll position, the footer’s top offset, the sticky element’s height, and optional padding. They added or removed a fixed class and adjusted the element’s top value as the footer approached. If you use this approach, reserve the sidebar’s original space (for example, with a placeholder or wrapper) so switching positioning does not reflow neighboring content. Recompute measurements when the viewport, sidebar, or footer size changes.
For a normal page layout, this extra machinery is usually unnecessary: fixing the containing wrapper and using CSS sticky handles a footer whose height changes without custom scroll code.
Practical variations
Different top offsets
If a fixed header occupies 4rem, set top: 4rem (or add the desired gap) so the sidebar does not sit underneath it.
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Sidebar taller than the viewport
A sticky element cannot display content that is taller than the available viewport in one piece. Consider making the sidebar content shorter, allowing an internal scroll region intentionally, or using a responsive layout that moves the sidebar below the article on small screens.
Responsive single-column layout
At a narrow width, stack the columns and disable sticky behavior if it no longer helps:
@media (max-width: 48rem) {
.layout {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
}
}Bottom line
Make the footer a sibling that follows a wrapper containing the sidebar, use position: sticky with a real top value, and remove unintended ancestor overflow. The wrapper’s bottom edge is the reliable CSS boundary that makes the sidebar stop before the footer.
Free tools Windows power users keep installed
One-click scans. No signup required.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
