Use position: sticky on the sidebar and place it inside a wrapper that ends before the footer. The sidebar will stick after it reaches its top threshold, then stop at the wrapper’s bottom edge instead of overlapping the footer.
Keep the sidebar inside the content region
A sticky element is constrained by its containing block. Make the sidebar’s wrapper part of the page’s main content, and place the footer after that content:
<main class="layout">
<article class="content">...</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;
}Here, the grid makes a content column and an 18rem sidebar column. The sticky sidebar sits 1rem from the top of its scrolling container once it reaches that threshold. As you continue down the page, it cannot move beyond the bottom of its wrapper. Because the wrapper ends with the main content, the sidebar stops before the footer. This containment approach is also described in the Stack Overflow discussion and SitePoint’s explanation of sticky positioning.
Check why sticky positioning may not work
- Give it an inset. Set a usable threshold such as
top: 1rem. Without an inset, there is no point at which the element should stick. - Inspect ancestor overflow. Check the sidebar’s ancestors for
overflow: hidden,overflow: auto, oroverflow: scroll. These can establish a different scrolling container, changing where sticky positioning applies. - Keep the wrapper in the content region. The wrapper must end before the footer for its lower boundary to stop the sidebar at the right place.
- Allow room to travel. If the wrapper is no taller than the sidebar, there is little or no distance over which sticky behavior can be seen.
- Consider footer positioning. A separately fixed footer can overlay content. Reserve space for it, or avoid fixing it unless that overlap is intentional.
When JavaScript is a fallback
Older approaches use a scroll handler to compare the window’s scroll position with the footer’s top offset, account for the sidebar’s height and optional padding, then add or remove a fixed-position class as the footer approaches. This requires measuring and updating positions as the page scrolls. Switching an element to position: fixed can also make nearby content jump unless the layout preserves the space it occupied. The Stack Overflow answer discusses this approach and its layout concern: stop a fixed-position div at the footer.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesQuick Recap
Rank #3
#1 Best Overall
As an Amazon Associate I earn from qualifying purchases.
For layouts that can provide a wrapper ending before the footer, CSS sticky is the simpler default: it does not depend on a scroll script, remains in document flow, and naturally respects the wrapper boundary. JavaScript is more relevant for older or unusual environments where that CSS layout cannot meet the requirement.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Sources and scope
SitePoint’s article on sticky positioning was published August 14, 2014, and updated November 7, 2024. The cited Stack Overflow answer was posted February 26, 2016. These sources explain the positioning pattern; they do not establish a browser-support matrix for every legacy environment.
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.
