How do I create a scroll sidebar in CSS?

Question

Position sticky alternates the position of an element between relative and fixed based on the viewer’s scroll position. A sticky element is relative to the document flow until a defined scroll position is reached, then it switches to behaving like a fixed element within its direct parent. Once, the sticky element hits the bottom of its parent, it doesn’t scroll past it.

Table of Contents Show

Troubleshooting position sticky
How do I make the sidebar follow scroll on my page?
How do I create a sidebar in CSS?
How do I add a scrollbar to CSS?
How do I make my sidebar scroll sticky in CSS?

Style panel → Position → Position → Sticky

With the sidebar selected, apply position sticky in the Style panel. You'll notice that if you scroll, the sidebar doesn't stick! It remains in its natural place in the document flow. That's because we didn't define a distance yet.

You must specify at least one position value for the top, bottom, left, or right side for sticky positioning to work. This depends on where your element is positioned within the parent and how you're scrolling, vertically or horizontally.

Define a distance from the top. Set the top value to 0px if you want the sidebar to stick to the top of the page, or set another value, say 30px, to make it stick to the top of the page with a distance of 30px from the top. Now, when you scroll, the sidebar should stick to the page as long as you're scrolling within the container, the direct parent, of the sidebar.

Troubleshooting position sticky

Sometimes, position sticky won't work even though you've set the position to sticky and defined a distance value for one of the sides of the element. That can happen for many reasons:

Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element.
Position sticky may not work correctly if any parent element has a set height.
Many browsers still do not support sticky positioning. .

Position sticky may also not work if the position distance value is set on a side that isn't affected by the scrolling. For example, if you set the distance on the left or right, and you're scrolling through the page vertically, the element won't stick. Another example would be if you've set a distance to the bottom, for instance, instead of the top and your element is aligned to the top of the parent — it's either the first element in the parent or aligned to the top with flex or grid alignment settings.

Webpages with a fixed sidebar and a scrollable content area are quite popular. The page expands to 100% height of the screen.

Depending upon the height, both the sidebar and content may have scrollbars.

Such pages are commonly used in admin sections, documentation pages etc.

Demo

Click to see the demo page

HTML Involved

Creating such a page involves 5 container elements :

Main outer container - this will expand to 100% of screen height
Container to hold the sidebar - this will also expand to 100% of screen height
Container to hold the content - also expandable to 100% of the screen height
Container to hold the sidebar contents - this will hold the main sidebar contents
Container to hold the main contents

<div id="container">
	<div id="sidebar">
		<div id="sidebar-content">[[ SIDEBAR CONTENTS ]]</div>
	</div><!--
--><div id="content">
		<div id="main-content">[[ MAIN CONTENTS ]]</div>
	</div>
</div>

is used to remove the space between the 2 inline-block elements. For more information see Fighting the Space Between Inline Block Elements.

CSS Involved

The CSS involved is quite simple. Both the sidebar and content containers are inline-block elements with height: 100% and overflow: auto.

html {
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
}

#container {
	height: 100%;
}

#sidebar {
	display: inline-block;
	vertical-align: top;
	height: 100%;
	width: 18%;
	overflow: auto;
}

#content {
	display: inline-block;
	vertical-align: top;
	height: 100%;
	width: 82%;
	overflow: auto;
}

A important thing is to set the height of html and body element as 100%. Ultimately height of a container is inherited from its parent, so if the parent is not occupying 100% of the screen height, setting the height of child as 100% won't bring anything.

html {
	height: 100%;
}

body {
	height: 100%;
}

Download Codes

Download

The easiest way to handle this is just to use CSS fixed positioning. Our sidebar is within a #page-wrap div with relative positioning, so the sidebar will set inside there, then we just push it over into place with margin. With this technique, the sidebar stays solidly in place as you scroll down the page.

You can add menu items in that space if you want..

Step 1: Create a basic html structure to create sidebars. ... .

Step 2: Design the background using css code. ... .

Step 3: Add profile images and titles. ... .

Step 4: Add menu items in the sidebar. ... .

Step 5: Design menu items with css code. ... .

Step 6: Create navigation bar..

How do I add a scrollbar to CSS?

The overflow-y property of CSS adds a scroller when needed, If we want to add the scroller after a specific height (e.g 100px in our case) Then, max-height: 100px; We add the max-height property of CSS so for example to add a scroller after 100px of height then max-height: 100px; is used.

You can either make a custom stylesheet specifying the sidebar style or you can add an inline CSS code "position: sticky" to your sidebar element/container.