To create a sticky sidebar in CSS, use the "position" property with a value of "fixed" and set the "top" and "left" properties to position it correctly.
CSS sticky position is a type of positioning that allows an element to "stick" to a certain position on the screen as the user scrolls, similar to a fixed position element, but with the added benefit of being able to move out of its containing block when it reaches a certain point. You can learn more about positions here How to Use CSS Positioning to Create Dynamic Web Layouts
Structuring the layout with required HTML
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<header>HEADER</header>
<main>
<div class="container">
<h1 class="main">MAIN CONTENT</h1>
<div class="sticky">
<div class="left-content">
<h2>Question-1</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
<h2>Question-2</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
<h2>Question-3</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
<h2>Question-4</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
<h2>Question-5</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
<h2>Question-6</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
<h2>Question-7</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
<h2>Question-8</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
<h2>Question-9</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
<h2>Question-10</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
<h2>Question-11</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
<h2>Question-12</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
</div>
<div class="right-sidebar">
<h2>Sticky Right Sidebar</h2>
<p>Hello Everyone</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
</div>
</div>
</main>
<footer>FOOTER</footer>
</body>
</html>
Designing the layout with required CSS properties
Style.css
body {
padding: 100px 50px;
max-width: 80%;
margin: 0 auto;
background: #000d57;
font-family: monospace;
font-size: 14px;
}
.main{
text-align: center;
}
main {
background: #fff;
margin: 25px 0;
padding: 40px 0;
}
header, main, .right-sidebar, footer{
box-shadow: inset 5px 5px 12px #555, 5px 5px 12px rgb(235 235 235 / 16%);
border-radius: 10px;
}
header,
footer{
background: #fff;
text-align: center;
padding: 50px;
font-size: 20px;
font-weight: 600;
}
.sticky {
display: flex;
}
.left-content{
flex: 0 0 60%;
padding: 0 85px;
}
li, a{
list-style: none;
text-decoration: none;
padding: 10px;
}
.right-sidebar {
color: #fff;
background-color: #001173;
height: max-content;
padding: 25px;
}
.right-sidebar {
position: sticky;
top: 0rem;
}
a{
color: #fff;
}Final results:
A sticky sidebar GIF can fulfill the requirement of keeping important information visible to users as they scroll down a webpage.
GIF Output
Conclusion
In this article, We designed a sticky right sidebar using the CSS position property that can provide a great user experience by keeping important content visible as users scroll down a webpage. Hope you learnt something new here. Thank you.
21 likes
Add to read list
Comments