Solve JavaScript Scroll Event Delay

GeekThis remains completely ad-free with zero trackers for your convenience and privacy. If you would like to support the site, please consider giving a small contribution at Buy Me a Coffee.

JavaScript is one of those languages that has a lot of quirks. One of them that I recently ran into is how the scroll event isn’t triggered until after the page scrolls. You probably will notice this being a problem on a few sites that have sticky sidebars and headers. A sticky element is an element, such as a sidebar, that scrolls with the page and is always visible. If you notice that the sticky element lags behind by a fraction of a second when you scroll giving it a jittering effect, that site is victim to this JavaScript “flaw.”

The intended effect is to have the sticky element always in the same spot unless you are at the top of the page. The way this is generally accomplished using JavaScript is to add a scroll event listener and then modifying the position of the element in relation to the scroll and screen position. Using the example below you can see that when scrolled through using the mouse wheel, the sidebar box will jitter around.

<!doctype html>
<html>
	<head>
		<style>
			body {
				min-height: 5000px;
			}
			#sidebar {
				width: 250px;
				height: 250px;
				text-align: center;
				line-height: 250px;
				background-color: #f8f8f8;
				border: 1px solid #dddddd;
			}

		</style>
	</head>
	<body>
		<div id="sidebar">
			Side Bar Element
		</div>

		<script>
			window.addEventListener('scroll',sticky,false);

			function sticky(e) {
				var sidebar = document.getElementById('sidebar');
				sidebar.style.marginTop = (document.body.scrollTop + 10) + 'px';
			}
		</script>
	</body>
</html>

This flaw can be fixed really quickly by adding a single line of code. We have to add another event listener to listen to the mouse wheel. If you look at the previous example again, you will notice that when you scroll using the scroll bar (yup, the gray bar on the side that no one uses) the issue doesn’t exist, the problem solely lies in the mouse. Below is the updated code to fix your jittering sticky elements that rely on JavaScript. Also I am aware of CSS sticky elements and various other methods, but sometimes JavaScript is required for more advanced uses.

<!doctype html>
<html>
	<head>
		<style>
			body {
				min-height: 5000px;
			}
			#sidebar {
				width: 250px;
				height: 250px;
				text-align: center;
				line-height: 250px;
				background-color: #f8f8f8;
				border: 1px solid #dddddd;
			}

		</style>
	</head>
	<body>
		<div id="sidebar">
			Side Bar Element
		</div>

		<script>
			window.addEventListener('scroll',sticky,false);
			/* NEW LINE OF CODE BELOW */
			window.addEventListener('wheel',sticky,false);

			function sticky(e) {
				var sidebar = document.getElementById('sidebar');
				sidebar.style.marginTop = (document.body.scrollTop + 10) + 'px';
			}
		</script>
	</body>
</html>

Related Posts

Bypass Google Analytics Opt-Out Extension

Easily bypass Google Analytics Opt-Out browser extension with a few lines of JavaScript and start tracking all users again.

JavaScript Tag Cloud

Learn how to create a tag cloud using only JavaScript along with sample code to use.

HTML5 Game Development Basics

Learn how to get started with creating games using HTML5 and JavaScript without any libraries.

How JSON P Works With Library

Learn how JSONp works along with sample JavaScript to perform a JSONP request.