Introduction to Sticky Sidebar CSS
Sticky Sidebar in CSS is used when sidebar wants to fix at the specific position even page scroll down to the bottom or scroll up to the top. It means the sidebar always fixed on any side. Now a day’s sticky sidebar feature has almost all the websites because it is very difficult to select the different options from the sidebar when we scroll down to the entire page. If we want to access sidebar elements, then we must go to the top again and select the option. It will kill user time, therefore, developers come up with sticky sidebar.
Advantage:
- Easily access sidebar elements.
Why CSS over HTML?
- If we have 1000 pages with the same styles to all the 1000 pages elements. If we write the same logic 1000 times, it is not at all recommended way in programming languages because it kills the processing time.
- Instead of writing common logic 1000 times, we can use Cascading Style Sheets(CSS) for writing common logic at a single place and invoke CSS file in an HTML file.
Invoking CSS file in HTML:
- <link rel=”stylesheet” href=”Styles.css”> by using this link we can invoke all CSS styles to the HTML page.
How to Create a Sticky Sidebar in CSS?
In CSS Sidebar can sticky by using position attribute with fixed Please refer below Syntax for better understanding.
Syntax:
//HTML Page Code
<!-- Side Bar elements -->
<div class="sideBar">
<a href="#">Name1</a>
<a href="#">Name2</a>
<a href="#">Name3</a>
<a href="#">Name4</a>
<a href="#">Name5</a>
<a href="#">Name6</a>
.
.
.
.
</div>
<!-- Main content of the page-->
<div class="main">
//some code
</div>
//CSS Code
.sidBar {
position: fixed; /* Make the sidebar immovable*/
z-index: 1; /* Side bar stays at the top */
top: 0;
left: 0;
overflow-x: hidden; /* restricting horizontal scroll */
}Examples of Sticky Sidebar in CSS
Following are the examples of sticky sidebar in css:
Example #1
Sticky Sidebar
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sticky SideBar</title>
<style>
h2 {
color: brown;
}
.sideBar {
height: 100%;
width: 150px;
overflow-x: hidden;
padding-top: 22px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: green;
padding-top: 22px;
}
body {
font-family: fantasy;
}
.content {
margin-left: 160px; /* Same as the width of the side bar */
font-size: 20px;
padding: 0px 8px;
border: 1px;
border-color: blue;
border-style: solid;
}
.sideBar a {
padding: 5px 7px 5px 15px;
color: blue;
text-decoration: none;
font-size: 24px;
display: block; /* is not allowing to have other block of elements inside the element */
}
.sideBar a:hover {
color: brown;
}
@media screen and (max-height: 500px) {
.sideBar {
padding-top: 14px;
}
.sideBar a {
font-size: 17px;
}
}
</style>
</head>
<body>
<div class="sideBar">
<a href="#">Login</a>
<a href="#">Register</a>
<a href="#">Purchase</a>
<a href="#">Order</a>
</div>
<div class="content">
<h2>Side Bar Demo</h2>
<p>Sticky Sidebar in CSS used when sidebar wants to fix at the
specific position even page scroll down to the bottom or scroll up to
the top. It means sidebar always fixed at any side.
<p>Now a days sticky sidebar feature has almost all the websites
because it is very difficult to select the different options from
sidebar when we scroll down to the entire the page.</p>
<p>If we want to access sidebar elements, then we must go to top
again and select the option. It will kill user time therefore
developers come up with sticky sidebar concept in CSS.</p>
<p>Sticky Sidebar in CSS used when sidebar wants to fix at the
specific position even page scroll down to the bottom or scroll up to
the top. It means sidebar always fixed at any side.
<p>Now a days sticky sidebar feature has almost all the websites
because it is very difficult to select the different options from
sidebar when we scroll down to the entire the page.</p>
<p>If we want to access sidebar elements, then we must go to top
again and select the option. It will kill user time therefore
developers come up with sticky sidebar concept in CSS.</p>
</div>
</body>
</html>Output:
Code Explanation: As you can see in the above example before scrolling and after scrolling the sidebar is not moved, it is fixed so we achieved our requirement.
Example #2
Sticky Sidebar with Buttons
Code:
<!DOCTYPE html>
<html>
<head>
<title>Sticky SideBar</title>
<style>
h2 {
color: brown;
}
.sideBar {
height: 100%;
width: 150px;
overflow-x: hidden;
padding-top: 22px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: green;
padding-top: 22px;
}
body {
font-family: fantasy;
}
.content {
margin-left: 160px; /* Same as the width of the side bar */
font-size: 20px;
padding: 0px 8px;
border: 1px;
border-color: blue;
border-style: solid;
}
.sideBar button {
padding: 5px 7px 5px 15px;
color: blue;
text-decoration: none;
font-size: 24px;
display: block; /* is not allowing to have other block of elements inside the element */
}
.sideBar button:hover {
color: brown;
}
@media screen and (max-height: 500px) {
.sideBar {
padding-top: 14px;
}
.sideBar button {
font-size: 17px;
}
}
</style>
</head>
<body>
<div class="sideBar">
<button>EDUCBA</button>
<button>Courses</button>
<button>Hot Courses</button>
<button>Login</button>
<button>Register</button>
<button>Course Fee</button>
<button>Contact</button>
</div>
<div class="content">
<h2>Side Bar with Buttons</h2>
<p>Sticky Sidebar in CSS used when sidebar wants to fix at the
specific position even page scroll down to the bottom or scroll up to
the top. It means sidebar always fixed at any side.
<p>Now a days sticky sidebar feature has almost all the websites
because it is very difficult to select the different options from
sidebar when we scroll down to the entire the page.</p>
<p>If we want to access sidebar elements, then we must go to top
again and select the option. It will kill user time therefore
developers come up with sticky sidebar concept in CSS.</p>
<p>Sticky Sidebar in CSS used when sidebar wants to fix at the
specific position even page scroll down to the bottom or scroll up to
the top. It means sidebar always fixed at any side.
<p>Now a days sticky sidebar feature has almost all the websites
because it is very difficult to select the different options from
sidebar when we scroll down to the entire the page.</p>
<p>If we want to access sidebar elements, then we must go to top
again and select the option. It will kill user time therefore
developers come up with sticky sidebar concept in CSS.</p>
</div>
</body>
</html>Output:
Code Explanation: As you can see in the above example before scrolling and after scrolling the sidebar is not moved, it is fixed so we achieved our requirement.
Example #3
Sticky Sidebar and Images
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sticky SideBar</title>
<link rel="stylesheet" href="StickySideBarImages.css">
</head>
<body>
<div class="sideBar">
<a href="#">Choose an Image</a>
<a href="#">Buy an Image</a>
<a href="#">Price of Images</a>
<a href="#">Order an Image</a>
</div>
<div class="content">
<h2>Side Bar Content Images</h2>
<p class="a"><img src="1.jpg"></p>
<p class="b"><img src="2.jpg"></p>
<p class="c"><img src="3.jpg"></p>
<p class="d"><img src="4.jpg"></p>
<p class="e"><img src="5.jpg"></p>
<p class="f"><img src="6.jpg"></p>
</div>
</body>
</html>CSS Code: StickySideBarImages.css
h2 {
color: blue;
}
.sideBar {
height: 100%;
width: 150px;
overflow-x: hidden;
padding-top: 22px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: fuchsia;
padding-top: 22px;
}
body {
font-family: sans-serif;
}
.a
{
float: left;
}
.b
{
float: right;
}
.c
{
float: left;
}
.d
{
float: right;
}
.e
{
float: left;
}
.f
{
float: right;
}
.content {
margin-left: 160px; /* Same as the width of the side bar */
font-size: 24px;
padding: 0px 8px;
}
.sideBar a {
padding: 5px 7px 5px 15px;
color: navy;
text-decoration: none;
font-size: 24px;
display: block; /* is not allowing to have other block of elements inside the element */
}
.sideBar a:hover {
color: lime;
}
@media screen and (max-height: 500px) {
.sideBar {
padding-top: 14px;
}
.sideBar a {
font-size: 17px;
}
}Output:
Code Explanation: As you can see in the above example before scrolling and after scrolling the sidebar is not moved, it is fixed so we achieved our requirement.
Recommended Articles
This is a guide to Sticky Sidebar CSS. Here we discuss the Introduction and how to create a sticky sidebar along with different examples and its code implementation. you may also have a look at the following articles to learn more –
