Foundation
Jump to Nav

# Sticky

JavaScript

Stick nearly anything, anywhere you like!

## Basics

Add the `.sticky` class and `[data-sticky]` to an element to create something that sticks. Sticky elements must be wrapped in a container, which will determine your sizing and grid layout, with `[data-sticky-container]`.

    <div class="columns small-6 right" data-sticky-container>
      <div class="sticky" data-sticky data-margin-top="0">
        <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
        <!-- This sticky element would stick to the window, with a marginTop of 0 -->
      </div>
    </div>

    <div class="columns small-6 right" data-sticky-container>
      <div class="sticky" data-sticky data-anchor="foo">
        <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
        <!-- This sticky element would stick to the window for the height of the element #foo, with a 1em marginTop -->
      </div>
    </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## Advanced

You can also use two anchors, if you please. Using `data-top-anchor="idOfSomething"`, `data-btm-anchor="idOfSomething:[top/bottom]"`, or a set pixel number `data-top-anchor="150"`. If you use an element id with no top/bottom specified, it defaults to the top.

    <div class="columns small-6 right" data-sticky-container>
      <div class="sticky" data-sticky data-top-anchor="example2:top" data-btm-anchor="foo:bottom">
        <img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
      </div>
    </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The image to the right will be sticky when it hits the top of this paragraph element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The image to the right will lose stickiness when it hits the bottom of this paragraph element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Stick to bottom

You can also stick to bottom. Using `data-stick-to="bottom"`. Here is an example using two anchors (like above) with a stick to bottom.

    <div class="columns small-6 right" data-sticky-container>
      <div class="sticky" data-sticky data-stick-to="bottom" data-top-anchor="example3" data-btm-anchor="foo2:top">
        <img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
      </div>
    </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The image to the right will be sticky when it hits the top of this paragraph element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The image to the right will lose stickiness when it hits the top of this paragraph element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## Sticky Navigation

Sometimes you want a sticky nav bar or side nav, this is pretty simple, but does involve an extra step from Foundation 5's `sticky` class addition to Top Bar. The minimum to make a stick nav bar is below, and you can swap out `.title-bar` for another menu component. Please note the style `width:100%`, you can do it inline, or in your style sheets.

    <div data-sticky-container>
      <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%">
        <div class="title-bar-left"><!-- Content --></div>
        <div class="title-bar-right"><!-- Content --></div>
      </div>
    </div>

With the minimum markup above, your nav bar will be sticky for the entire page. You could change this up by using anchor points, so it sticks and breaks at important markers on the page. A top anchor point of '1' will make it stick at the top of the page, a bottom anchor of `content:bottom` will make it break at the bottom of your `#content` element. This is useful if you want a sticky nav element, but not for the full length of the page.

    <div data-sticky-container>
      <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="1" data-btm-anchor="content:bottom">
        <div class="title-bar-left"><!-- Content --></div>
        <div class="title-bar-right"><!-- Content --></div>
      </div>
    </div>

## JavaScript Reference

### Initializing

The file `foundation.sticky.js` must be included in your JavaScript to use this plugin, along with `foundation.core.js`. This plugin also requires these utility libraries:

- `foundation.util.triggers.js`

- `foundation.util.mediaQuery.js`

### Foundation.Sticky

Creates a new instance of a sticky thing.

    var elem = new Foundation.Sticky(element, options);

Name | Type | Description
--- | --- | ---
`element` | jQuery | jQuery object to make sticky.
`options` | Object | options object passed when creating the element programmatically.

### Plugin Options

Use these options to customize an instance of Sticky. Plugin options can be set as individual data attributes, one combined `data-options` attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name | Type | Default | Description
--- | --- | --- | ---
`data-container` | `string` | `<div data-sticky-container></div>` | Customizable container template. Add your own classes for styling and sizing.
`data-stick-to` | `string` | `top` | Location in the view the element sticks to. Can be `'top'` or `'bottom'`.
`data-anchor` | `string` | `''` | If anchored to a single element, the id of that element.
`data-top-anchor` | `string` | `''` | If using more than one element as anchor points, the id of the top anchor.
`data-btm-anchor` | `string` | `''` | If using more than one element as anchor points, the id of the bottom anchor.
`data-margin-top` | `number` | `1` | Margin, in `em`'s to apply to the top of the element when it becomes sticky.
`data-margin-bottom` | `number` | `1` | Margin, in `em`'s to apply to the bottom of the element when it becomes sticky.
`data-sticky-on` | `string` | `medium` | Breakpoint string that is the minimum screen size an element should become sticky.
`data-sticky-class` | `string` | `sticky` | Class applied to sticky element, and removed on destruction. Foundation defaults to `sticky`.
`data-container-class` | `string` | `sticky-container` | Class applied to sticky container. Foundation defaults to `sticky-container`.
`data-check-every` | `number` | `-1` | Number of scroll events between the plugin's recalculating sticky points. Setting it to `0` will cause it to recalc every scroll event, setting it to `-1` will prevent recalc on scroll.

### Events

These events will fire from any element with a Sticky plugin attached.

Name | Description
--- | ---
`stuckto.zf.sticky` | Fires when the $element has become `position: fixed;` Namespaced to `top` or `bottom`, e.g. `sticky.zf.stuckto:top`
`unstuckfrom.zf.sticky` | Fires when the $element has become anchored. Namespaced to `top` or `bottom`, e.g. `sticky.zf.unstuckfrom:bottom`

### Methods

#### _pauseListeners

    $('#element').foundation('_pauseListeners', scrollListener);

Removes event handlers for scroll and change events on anchor.

Fires these events: Sticky#event:pause

Name | Type | Description
--- | --- | ---
`scrollListener` | String | unique, namespaced scroll listener attached to `window`

#### _calc

    $('#element').foundation('_calc', checkSizes, scroll);

Called on every `scroll` event and on `_init` fires functions based on booleans and cached values

Name | Type | Description
--- | --- | ---
`checkSizes` | Boolean | true if plugin should recalculate sizes and breakpoints.
`scroll` | Number | current scroll position passed from scroll event cb function. If not passed, defaults to `window.pageYOffset`.

#### destroy

    $('#element').foundation('destroy');

Destroys the current sticky element. Resets the element to the top position first. Removes event listeners, JS-added css properties and classes, and unwraps the $element if the JS added the $container.

#### emCalc

    $('#element').foundation('emCalc', Number);

Helper function to calculate em values

Name | Type | Description
--- | --- | ---
`Number` | em | number of em's to calculate into pixels