How to create a sidebar that’s sticky but also scrolls
New Courses Coming Soon
Join the waiting lists
To make a sidebar fixed but also accommodate screens that are not tall enough to contain the entire sidebar, use this CSS:
.sidebar {
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
Using Tailwind CSS:
<div class='sticky top-0 h-screen overflow-y-auto'>
...
</div>
→ Get my CSS Handbook
→ Read my CSS Tutorial on
The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X