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
- We need an index.html file to write our page layout.
- We need a script.js file to write the javascript code.
- And a styles.css stylesheet to structure the layout.
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