Learn how to create a responsive sticky sidebar using HTML, Tailwind CSS, and JavaScript. Step-by-step guide with easy code examples for beginners.

Table of Contents
A sticky sidebar is useful when you want some elements (like a menu, ad, or important links) to remain fixed while scrolling. This is common in blogs and dashboards.
In this guide, we will build a responsive sticky sidebar using HTML, Tailwind CSS, and JavaScript. It will stay fixed when scrolling down and adjust on different screen sizes.
Prerequisites
Before starting, make sure you have:
- Basic knowledge of HTML, CSS, and JavaScript
- A code editor like VS Code
- An internet connection to use Tailwind CSS CDN
Source Code
Step 1 (HTML Code):
Create a simple HTML file with a main content area and a sidebar. Here's a breakdown of the code:
1. HTML Structure:
<head>
: Contains meta information and links to external resources.<meta charset="UTF-8">
: Defines the character set for the document as UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">
: Ensures the page is mobile-friendly by setting the viewport to scale correctly on different devices.<title>
: The title displayed in the browser tab, "Responsive Sticky Sidebar - Tailwind CSS."<script src="https://cdn.tailwindcss.com"></script>
: Loads Tailwind CSS via CDN for styling the page.
<body>
: Contains the main content of the webpage.bg-gray-100 p-6
: Applies a light gray background and padding around the entire page.
2. Main Content (<main>
):
- Container and Grid Layout:
container max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-4 gap-6
: The layout is a grid that displays 1 column on small screens and 4 columns on large screens (lg:grid-cols-4
).
- Hero Section:
- Displays a title and short description with a placeholder image on the left.
flex flex-col md:flex-row items-center gap-4
: This makes the image and text align horizontally on medium screens (md:flex-row
) and vertically on smaller screens (flex-col
).
- Featured Articles Section:
- A grid displaying 3 articles, each with an image, title, and description. The articles are arranged in a single column on small screens and 3 columns on medium screens and up (
md:grid-cols-3
).
- A grid displaying 3 articles, each with an image, title, and description. The articles are arranged in a single column on small screens and 3 columns on medium screens and up (
- Blog Section:
- Displays a list of the latest blog posts. Each post has an image, title, and description.
- The blog posts are arranged in a vertical list with
space-y-4
to add vertical spacing between them.
3. Sidebar (<aside>
):
- Profile Card:
- Shows the author's name and title ("John Doe - Tech Enthusiast").
- Categories Section:
- Lists categories like Technology, Business, Health, and Lifestyle, with links styled in blue (
text-blue-500
).
- Lists categories like Technology, Business, Health, and Lifestyle, with links styled in blue (
- Recent Posts Section:
- Lists recent blog posts with links to their titles.
4. External Scripts:
- jquery.min.js: Includes jQuery for additional interactivity.
- [email protected]: Loads a script to detect changes in the size of elements.
- [email protected]: Adds the "sticky" functionality to the sidebar, ensuring it stays in place while scrolling.
5. Placeholder Images:
- Placeholder images are used throughout the page, loaded from
https://www.codewithfaraz.com/tools/placeholder?size=300x300
(for larger images) andhttps://www.codewithfaraz.com/tools/placeholder?size=100x100
(for smaller images).
Step 2 (CSS Code):
No custom CSS thanks to Tailwind!
/*
No custom CSS thanks to Tailwind!
tailwindcss.com
*/
Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. Here's a breakdown of the code:
$(document).ready(function() {...})
- This ensures that the code inside runs only after the entire HTML document has been loaded.
- It's a shorthand for
$(function() {...})
, commonly used in jQuery.
$('div.container aside')
- This selects the
<aside>
element inside a<div>
with the classcontainer
. - The
<aside>
element represents the sidebar in the HTML layout.
.theiaStickySidebar({...})
- This is a function from the Theia Sticky Sidebar plugin.
- It makes the sidebar "sticky," meaning it stays fixed when the user scrolls down the page.
additionalMarginTop: 10
- This option adds a 10-pixel margin at the top of the sticky sidebar.
- It ensures that the sidebar does not stick directly to the top of the viewport when scrolling.
$(document).ready(function() {
$('div.container aside').theiaStickySidebar({
additionalMarginTop: 10
});
});
Final Output:

Conclusion:
Now you have a fully responsive sticky sidebar using HTML, Tailwind CSS, and JavaScript. This method is simple and works smoothly across different screen sizes.
🔹 Want to improve it? Try adding animations or making it hide on smaller screens!
If you found this guide helpful, share it with others! 🚀
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊