How to make a portion of your sidebar sticky as you scroll till the footer of your web page with jQuery and some CSS styles

You want a portion of your sidebar to stick as you scroll down your web page.

When you reach the footer of your web page, you want that portion to stop just above the footer of your web page.

In this case, you can use jQuery to help you achieve this behaviour.

Given that, this post shows how to make a portion of your sidebar sticky as you scroll till the footer of your web page with jQuery and some CSS styles.

Setting up the HTML part of the equation

In order for jQuery to locate the sticky part of the content, define a HTML element that should contain the sticky content:

<div id="sticky-sidebar">
<p>The sticky content</p>
</div>

In addition to that, define a HTML element just before the sticky portion. Given that, you should have HTML elements that look like the following:

<div id="before-sticky-sidebar">
<p>The non-sticky content</p>
</div>
<div id="sticky-sidebar">
<p>The sticky content</p>
</div>

Finally, define a HTML element that marks the section that the sticky portion stops being sticky. For example, we can define a footer section for such a purpose:

<div id="main-footer">
<!-- Footer content -->
</div>

Setting up the CSS part of the equation

After setting up the HTML elements, define a style class to make the sticky portion stick.

#sticky-sidebar.stick {
	position: fixed;
	max-width: 350px;
}

In the above code, we define a style class that will keep the sticky portion in place. In addition to that, we also apply the max-width property to keep children elements of the sticky portion to a maximum width.

The JavaScript / jQuery code to make a portion of your sidebar sticky as you scroll till the footer of your web page

Once we have defined the CSS style class, we are ready to include the jQuery codes within our web page.

function sticky_relocate() {
	var window_top = jQuery(window).scrollTop();
	var footer_top = jQuery("#main-footer").offset().top;
	var div_top = jQuery('#before-sticky-sidebar').offset().top + jQuery('#before-sticky-sidebar').height();
	var div_height = jQuery("#sticky-sidebar").height();

	var padding = 20;  

	if (window_top + div_height > footer_top - padding) {
		jQuery('#sticky-sidebar').css({top: (window_top + div_height - footer_top + padding) * -1});
	}
	else if (window_top > div_top) {
		jQuery('#sticky-sidebar').addClass('stick');
		jQuery('#sticky-sidebar').css({top: 80});
	} else {
		jQuery('#sticky-sidebar').removeClass('stick');
	}
}

jQuery(document).ready(function() {
	jQuery(window).scroll(sticky_relocate);
	sticky_relocate();
});

So what does the jQuery / JavaScript code do?

First, we define a function, sticky_relocate, that will be called whenever the user scrolls the web page.

At the start of sticky_relocate, we first get some values for deciding the location of the sticky portion of the sidebar:

• window_top that denotes which part of the web page that the current view is at.
• footer_top that denotes the top of the footer.
• div_top that denotes the bottom of the non sticky content. We take the bottom of the non sticky content so that we can put in content with varying height later.
• div_height that denotes that height of the sticky content.

Once we have these values, we define three condition blocks to tweak the position of the sticky content.

if (window_top + div_height > footer_top - padding) {
	jQuery('#sticky-sidebar').css({top: (window_top + div_height - footer_top + padding) * -1});
}

checks whether the sticky content had gone past the footer. When the sticky content had gone past the footer, we position it just above the footer.

else if (window_top > div_top) {
	jQuery('#sticky-sidebar').addClass('stick');
	jQuery('#sticky-sidebar').css({top: 80});
} 

checks whether the user had scrolled past the bottom of the non sticky content. When the condition holds true, we apply the style class to #sticky-sidebar to make it stick. In addition, we keep a space of 80 pixels at the top of the sticky content.

else {
	jQuery('#sticky-sidebar').removeClass('stick');
}

runs when the user had not scrolled past the bottom of the non sticky content. In this case, the code attempts to remove the style class that make the sticky portion stick.

• Share
• Tweet
• Share
• Save