Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Stickout is a jQuery/bootstrap plugin to stick things
JavaScript
branch: gh-pages

README.md

Stickout

Stickout is a jQuery plugin, which works well with the Twitter bootstrap, to stick things.
Stickout is not a polyfill for the new position: sticky, it emulates the sticky effect from some mobiles Apps (Google Now, Google+…).
Just try it, scroll down the example and then, scroll up.

Usage

Via data attributes

To easily add stickout behavior to an element, just add data-spy="stickout" to the element you want to spy on.

<div data-spy="stickout">...</div>

Via JavaScript

Call the stickout via JavaScript

$('#el').stickout(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name type default description
top number 20 The `top` of the element when fixed.
offset number The `$.fn.outerHeight(true)` of the sticked element + 20 The offset when you start to scroll up.
placeholder string ‘stickout-placeholder’ The `class` attribute for the placeholder element which is a clone of the sticked element.
shown string ‘stickout-shown’ The `class` attribute which will be added when the element is shown (when you scroll up).
fixed string ‘stickout-fixed’ The `class` attribute which will be added when the element is fixed.

Heads up! Options for individual stickout can alternatively be specified through the use of data attributes.

CSS

Stickout will automatically set appropriate values of the position and top CSS properties on the element. As seen in the options, you can specify classes for the different states of the stickout, here is the basic CSS you should use for.

.stickout-placeholder {
    filter: alpha(opacity=0);
                opacity: .0;
}
.stickout-shown {
    box-shadow: 0 5px 10px hsla(0, 0%, 0%, .5);
}

Methods

.stickout(’destroy’)

Destroys the stickout behavior on the element

.stickout(’init’)

Initialize stickout (by default when stickout is launch the first time). Can be use to reinitialize stickout after the destroy methods is called.

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality.

Event Description
shown This event fires when the sticked element is shown, so basically, when you scroll up.
fixed This event fires when the sticked element became fixed.
static This event fires when the sticked element take back is initial position.
Something went wrong with that request. Please try again.