Create Responsive Sticky Sidebar with HTML, Tailwind and JavaScript

Faraz

By Faraz -

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


create-responsive-sticky-sidebar-with-html-tailwind-and-javascript.webp

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

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).
  • 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).
  • 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) and https://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 class container.
    • 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:

    create-responsive-sticky-sidebar-with-html-tailwind-and-javascript.gif

    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 😊

    End of the article

    Subscribe to my Newsletter

    Get the latest posts delivered right to your inbox


    Latest Post

    Please allow ads on our site🥺