Introduction

Stickr.js is a jQuery plugin that helps you create multiple sticky elements on a page and comes with a robust set of options that allows anyone to make it work great on their setup. It is designed to allow an element to stick to the top of the screen as while scrolling without moving outside of the parent container or the container set in the options.

Stickr.js is designed to allow an element to stick to the top of the screen as page scrolls down, but without moving outside of the parent container.

Example Nr. 1

In the first example the plugin is called with no options, which means default options are applied.

Usage

The sidebar on the right is working using the default options. The following code was used for it:

$('#side-1').stickr();

Here are all the options offered by the plugin and their default values:

easing string - Allows the user to set the type of easing to be used in the animation. Defaults to swing.
duration numeric - Allows the user to set the duration of the animation. Defaults to 300.
closeButton boolean - Allows the user to show the close button or not. Defaults to false, not showing by default.
closeChar string - Allows the user to set the character or text to be used as the close button. Defaults to ⓧ.
closeTop numeric - Allows the user to set relative position of the close button to the top of the selected element, in pixels. Defaults to 0.
closeRight numeric - Allows the user to set relative position of the close button to the right of the selected element, in pixels. Defaults to 0.
closest string - Allows the user to set a different parent up the rather then the direct one, by using the .closest() method to search through the ancestors in the DOM tree. Defaults to null, using the direct parent element.
offsetTop numeric - Allows the user to set an offset to in pixels to alter the point where from where you want the sticking to start. Defaults to 0.
offsetBottom numeric - Allows the user to set an offset to in pixels to alter the point where from where you want the sticking to stop. Defaults to 0.
queue boolean - Allows the user to set whether the animation is placed into the queue. If false, animation starts immediately. Defaults to false.

Sidebar Nr. 1

This is a sticky element using the default stickr settings. Keep scrolling ...

Example Nr. 2

In the second example we are showing the close button and give it a bit of margin on top and left, so it looks good. If you click it the sidebar will behave as a normal piece of html that won't stick.

Usage

The sidebar on the right is working using the following options as below:

$('#side-2').stickr({
    closeButton: true,
    closeTop: 5,
    closeRight: 5
});

Here are all the options offered by the plugin and their default values:

Sidebar Nr. 2

This is a sticky element using the stickr settings as shown on the left. Keep scrolling ...

Example Nr. 3

In the third example we are using duration as 0 so it sticks all the time in stead of delayed animation. Also, here we use offset from top and bottom so the sidebar does have a bit of magin from top and bottom.

Usage

The sidebar on the right is working using the following options as below:

$('#side-3').stickr({
    duration: 0,
    offsetTop: 30,
    offsetBottom: 30
});

Here are all the options offered by the plugin and their default values:

Sidebar Nr. 3

This is a sticky element using the stickr settings as shown on the left. Keep scrolling ...

Authors and Contributors

This plugin is developed by Baki Goxhaj and is inspired by the work of Matt Ward

Support

If you've any questions or suggestions about Stickr, you should create an issue here.