Default Settings

The sticky element functionality can easily be added to an element with appropriate default settings.
You can also remove the sticky element functionality if it is no longer required.

Default sticky:

Sufficient content to allow scrolling.

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

The sticky element.

This element scrolls with the page until it reaches the top. It then stays there until reaching the bottom of the corresponding content, when it disappears off the screen.

$('#defaultSticky').sticky();

$('#removeSticky').click(function() {
	var remove = $(this).text() === 'Remove';
	$(this).text(remove ? 'Re-attach' : 'Remove');
	$('#defaultSticky').sticky(remove ? 'destroy' : {});
});

You can override the defaults globally as shown below:

$.sticky.setDefaults({marginTop: 50});

Processed fields are marked with a class of is-sticky and are not re-processed if targeted a second time.

Options 1

Customise the more functionality through additional settings.

Reserve extra space at the top and be notified of changes:

Sufficient content to allow scrolling.

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

This content doesn't stick.

The sticky element.

This element scrolls with the page until it reaches the top + 30 pixels. It then stays there until reaching the bottom of the corresponding content, when it disappears off the screen.

Status:

$('#reserveSticky').sticky({boundedBy: '#reserveContent', marginTop: 30,
	scrolled: function(status) {
		$('#reserveSticky span').text(status);
	}
});
Options 2

Customise the more functionality through additional settings.

Restrict the sticky element to another container:

Sufficient content to allow scrolling.

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

The sticky element.

This element scrolls with the page until it reaches the top. It then stays there until reaching the bottom of the specified panel, when it disappears off the screen.

$('#boundedSticky').sticky({boundedBy: '#boundedAside'});
In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (wood.keith{at}optusnet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).sticky({
	boundedBy: '#content', // The element that defines the top and bottom
		// boundaries within which the sticky element stays
	marginTop: 0, // Any additional space reserved at the page top
	scrolled: null // A callback when the page is scrolled
});

$.sticky.setDefaults(settings) // Change settings for all instances

$(selector).sticky('option', settings) // Change the instance settings
$(selector).sticky('option', name, value) // Change an instance setting
$(selector).sticky('option', name) // Retrieve an instance setting

$(selector).sticky('destroy') // Remove the sticky element functionality