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.
Similar Code Snippets:
- Modern Blog Layout Using CSS Grid
- Sticky Sidebar on Scroll JavaScript
- Animated Curved Header using SVG And CSS
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.