Sticky Sidebar on Scroll JavaScript

This JavaScript code implements “Sticky Sidebar on Scroll” functionality. It makes a sidebar stick to the top or bottom based on scrolling and screen size, enhancing user experience by keeping the sidebar visible during scrolling.

You can use this code on websites with sidebars to create a user-friendly experience. It keeps the sidebar visible when scrolling, improving navigation. This enhances content accessibility and user engagement.

How to Create a Sticky Sidebar On Scroll using HTML, CSS and JavaScript

1. To get started, make sure you have an HTML structure that includes the main content and the sidebar you want to make sticky. Here’s a basic example:

<div id="header"><h1>Lightweight, Intelligent Sticky Sidebar, NO libraries</h1></div>
<div id="wrapper">
	<div id="main">
		Main content
	</div>
	<div id="sidebar">
		<div id="sc">
			Sticky sidebar
		</div>
	</div>
</div>
<div id="footer"></div>

2. The following CSS code styles your HTML elements to create the desired layout and appearance. Ensure you include this CSS in your stylesheet to maintain the structure and design.

body *{box-sizing:border-box;}

#header,#footer{width:100%;height:200px;background-color:#eee;text-align:center;}
body,#main,#wrapper,#sc{padding:15px;}
#main{background-color:#F88300;width:60%;height:180vh;}
#sidebar{position:relative;width:25%;}
#sc{background-color:#FFD600;height:80vh;}	
#wrapper{display:flex;justify-content:space-between;}
#wrapper.fix-bottom-VP #sc,#wrapper.fix-top-VP #sc{position:fixed;}
#wrapper.fix-bottom-VP #sc{bottom:15px;}
#wrapper.fix-top-VP #sc{top:15px;}
#wrapper.flex-bottom{align-items:flex-end;}

3. Finally, include the JavaScript code within your HTML document or an external JavaScript file. This code handles the sticky sidebar functionality by adjusting the sidebar’s position as the user scrolls.

var	wrapper = document.getElementById("wrapper"), main = document.getElementById("main"), sidebar = document.getElementById("sc");
window.onscroll = function() {
	document.getElementById('sc').setAttribute("style","display:block;width:" + document.getElementById("sidebar").offsetWidth+"px");
	document.getElementById('sc').style.width = document.getElementById("sidebar").offsetWidth;	
	//if sidebar smaller than main
	if (sidebar.offsetHeight < main.offsetHeight) {
		//if sidebar smaller than screen - stick to top rather than bottom
		if (sidebar.offsetHeight < window.innerHeight) {
			if ((wrapper.getBoundingClientRect().bottom < (window.innerHeight))
					&& ((wrapper.getBoundingClientRect().bottom < sidebar.offsetHeight))
				 ) {
				wrapper.classList.remove("fix-top-VP");
				wrapper.classList.add("flex-bottom");
			}
			else if (wrapper.getBoundingClientRect().top < 0 ) {
				wrapper.classList.add("fix-top-VP");
				wrapper.classList.remove("flex-bottom");
			}
			else {
				wrapper.classList.remove("fix-top-VP");
				wrapper.classList.remove("flex-bottom");
			}
		}
		//if wrapper taller than sidebar - stick to bottom
		else if (sidebar.offsetHeight < wrapper.offsetHeight) {
			if (wrapper.getBoundingClientRect().bottom < (window.innerHeight)) {
				wrapper.classList.remove("fix-bottom-VP");
				wrapper.classList.add("flex-bottom");
			}
			else if (wrapper.getBoundingClientRect().bottom > (sidebar.offsetHeight + window.innerHeight)) {
				wrapper.classList.remove("fix-bottom-VP");
				wrapper.classList.remove("flex-bottom");
			}
			else {
				wrapper.classList.add("fix-bottom-VP");
				wrapper.classList.remove("flex-bottom");
			}
		}
	}
}

You can customize the sidebar’s content and appearance by modifying the HTML and CSS as per your requirements. Make sure to maintain the appropriate IDs and class names.

That’s all! hopefully, you have successfully created a sticky sidebar on scroll in JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.