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.