How to make a sidebar sticky on scroll

Updated: 08-Jan-2024 / Tags: HTML, CSS and Javascript / Views: 179 - Author: George

Introduction

A sticky sidebar is a popular web design element that stays fixed on the page while the user scrolls, providing easy access to navigation or important content. Achieving this effect involves a combination of HTML, CSS, and JavaScript.

So in this article we are going to see how to create a sticky sidebar element when the user scrolls down the content.

Live Demo

Check out the live demo. You will see that the second element in the sidebar stays in place when it reaches the top of the page.

Project's folder

Let's see the files that we need to recreate the above demo.

/--projects-folder
  |--index.html		
  |--script.js		
  |--styles.css

The Index file

Let's start with the index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="styles.css">
	<title>How to make sidebar sticky on scroll</title>
</head>
<body>
	<div class="header">
		<h2>Header</h2>
		<h3>This is the Header</h3>
	</div>

	<div class="navigation">
		<h3>The Navigation menu</h3>
	</div>

	<div class="page">

		<div class="content">
			<h3>The content</h3>
			<p class="text">
				Lorem ipsum, dolor, sit amet consectetur adipisicing elit. 
				Earum tenetur voluptatibus modi enim, neque asperiores 
				recusandae velit quae in officiis officia, quam hic 
				dolores minima odit commodi dolorum, aut eius fugit. 
			</p>
			<p class="text">
				... more content
			</p>
		</div> <!-- End of content -->

		<div class="sidebar">
			<div class="section">
				<p class="text">
					This section will scroll with the content.
				</p>	
			</div>

			<div class="section" id="sticky-section">
				<p class="text">
					This section will stick at the top a 
					long there is content to scroll.
				</p>
			</div>
		</div> <!-- End of sidebar -->
	</div> <!-- End of page -->

	<div class="footer">
		<h3>This is the footer</h3>
	</div>

	<!-- Link to the javascript file -->
	<script src="script.js"></script> 
</body>
</html>
	
  • In line 41 we have the div element that we are going to make stick in place when we scroll. The element has an id of "sticky-section" (id="sticky-section"). We are going to target the element's id from the javascript code to change its css properties, and make it to stick

The Javascript file

Now let's see the code that we have in the javascript file which makes the element to stick.

// Select the HTML element with the id "sticky-section" 
// and assign it to the variable "element"
let element = document.querySelector("#sticky-section");

// Attach a function to the window's onscroll event
window.onscroll = function() {
    // Check if the vertical scroll position (window.scrollY) 
    // is greater than the top offset of the "sticky-section" element
    if (window.scrollY > element.offsetTop) {
        // If the condition is true, set the CSS style 
        // of the "sticky-section" element to make it sticky
        element.style.position = "sticky";
        // Set the top position of the 
        // "sticky-section" element to 20 pixels
        element.style.top = 20 + "px";
    }
}
	

Explaining the above javascript code.

  • The document.querySelector("#sticky-section") line selects the HTML element with the id "sticky-section" and assigns it to the variable element.
  • The window.onscroll event is triggered whenever the user scrolls on the page.
  • Inside the event handler function, the code checks if the current vertical scroll position (window.scrollY) is greater than the top offset of the "sticky-section" element (element.offsetTop).
  • If the scroll position is greater than the element's top offset, the code inside the if statement is executed.
  • Inside the if statement, the code sets the CSS style of the "sticky-section" element to make it sticky by changing its position to "sticky". Additionally, it sets the top position to 20 pixels, creating a space between the top of the viewport and the sticky element.

The CSS file

And last we have the css code that structures the whole page layout.

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	font-family: sans-serif;
	min-height: 100%;
	color: #555;
	background-color: #fff;
	padding: 20px;
}
.header{
	height: 100px;
	border: thin solid #d4d4d4;
	margin-bottom: 10px;
	padding: 20px;
}
.header h2{
	margin-bottom: 20px;
}
.navigation{
	border: thin solid #d4d4d4;
	margin-bottom: 40px;
	padding: 20px;
}
.page{
	display: grid;
	grid-template-columns: 1fr 200px; 
	grid-column-gap: 30px;
}
.content{
	padding: 20px;
	border: thin solid #d4d4d4;
}
.content h3{
	margin-bottom: 30px;
}
.content .text{
	margin-bottom: 30px;
}
.sidebar .section{
	height: 300px;
	margin-bottom: 50px;
	border: thin solid #d4d4d4;
}
.sidebar .section .text{
	padding: 10px;
}
.footer{
	padding: 20px;
	border: thin solid #d4d4d4;
	margin-top: 20px;
}
	

Summary

And that's it! We've learned how to create a sticky sidebar that remains fixed as the user scrolls through the content. We've covered the necessary page structure and the few lines of JavaScript code needed to achieve this effect.

Also you can read the article on how to Creating a sticky navigation bar .

Thanks for reading, i hope you find the article helpful.
Please leave a comment if you find any errors, so i can update the page with the correct code.

Source code

You can download the source code and use it in any way you like.

Times downloaded: 17

Buy me a coffee

If you like to say thanks, you can buy me a coffee.

Buy me a coffee with paypal