Fixed Sidebar With Scrolling Content

Fixed Sidebar With Scrolling Content
Code Snippet:Fixed header/sidebar w/ scrolling content
Author: nifte
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 1,798
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a “Fixed Sidebar With Scrolling Content” layout. It features a sticky header, a fixed sidebar, and scrollable main content. The header remains at the top as you scroll. The sidebar sticks below the header and has a defined height and width, while the main content is scrollable and responsive.

It’s beneficial for improving user experience by keeping important navigation options readily accessible. This layout ensures your header and sidebar stay visible, enhancing site navigation and content interaction.

How to Create Fixed Sidebar With Scrolling Content

1. Begin by creating your HTML file. Copy the following HTML code into your file. This structure includes a header, sidebar, and main content section.

<html>
  <body>
    <header>
      some header content
    </header>
    <div class="flex-container">
      <aside>
        some sidebar content
      </aside>
      <main>
        <div class="content">some main content</div>
        <div class="content">some main content</div>
        <div class="content">some main content</div>
        <div class="content">some main content</div>
        <div class="content">some main content</div>
      </main>
    </div>
  </body>
</html>

2. In the CSS section, we’ve made the header sticky, ensuring it stays at the top as users scroll down. You can customize the header’s appearance by modifying its background, height, and other properties.

body {
  margin: 0 20px;
}

header {
  position: sticky;
  top: 0;
  background: rgb(0, 200, 255);
  height: 60px;
  margin-bottom: 20px;
  padding: 0 20px;
  z-index: 10;
  
  /* for positioning text, links, etc */
  display: flex;
  align-items: center;
}

.flex-container {
  display: flex;
}

aside {
  position: sticky;
  top: 80px; /* the height of the header (60px) + its bottom margin (20px) */
  background: rgb(255, 100, 100);
  padding: 20px;
  width: 20%;
  height: 500px;
  margin-bottom: 20px;
}

main {
  padding-left: 20px;
  flex-grow: 1;
}

.content {
  background: rgb(200, 200, 200);
  height: 300px;
  padding: 20px;
  margin-bottom: 20px;
}

The main content area is flexible and responsive. You can add more content blocks as needed. The code provided defines the appearance of these content blocks. Feel free to modify the background, height, and padding according to your website’s style.

That’s all! hopefully, you have successfully created a fixed sidebar with scrolling content. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X