Sticky Sidebar on Scroll JavaScript

Sticky Sidebar on Scroll JavaScript
Code Snippet:Intelligent Sticky Sidebar - no libraries, no jQuery - sticks to top and bottom, no jQuery - just CSS and vanilla Javascript
Author: MikeFitzpatrick
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 870
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X