# Sticky

Make elements remain at the top of the viewport, like a sticky navbar.

## Usage

To create an element that remains at the top of the viewport when scrolling down the site, add the `data-uk-sticky` attribute to that element.

### Example

Stick to the top

### Markup

    <div data-uk-sticky>...</div>

## Define an offset

You can also position the element below the viewport edge. For example, add the `data-uk-sticky="{top:100}"` attribute to create a margin of 100px.

### Example

Stick 100px below the top

### Markup

    <div data-uk-sticky="{top:100}">...</div>

## Add a delay

To add a delay to the element, so it becomes sticky only after scrolling a specified distance, you need to add a negative offset to the data attribute, e.g. `data-uk-sticky="{top:-200}"`. You can also add an animation from the Animation component in order to have the sticky element reappear smoothly.

### Example

Stick at the top but only after 100px scrolling

### Markup

    <div data-uk-sticky="{top:-200, animation: 'uk-animation-slide-top'}">...</div>

## Responsive behavior

You also have the possibility of disabling the sticky behavior for different devices by adding a breakpoint option to the data attribute, e.g. `data-uk-sticky="{media: 640}"`. Additionaly you can use any valid media query.

### Markup

                                    <!-- This is basically a shortcode to define a min-width -->
                                    <div data-uk-sticky="{media: 640}">...</div>

                                    <!-- This is a media string using the min-width and orientation properties -->
                                    <div data-uk-sticky="{media: '(min-width: 640px) and (orientation: landscape)'}>...</div>

## Sticky boundary

You can define the boundary of a sticky element by setting the `boundary` parameter. This keeps the sticky element within the dimensions of the boundary element.

### Example

Sticky bound to parent container
Sticky as long as bondary element is in view
Boundary element

### Markup

                                    <!-- Bind sticky to its parent element -->
                                    <div data-uk-sticky="{boundary: true}">...</div>

                                    <!-- Bind sticky to any element -->
                                    <div data-uk-sticky="{boundary: '#my-id'}">...</div>

## JavaScript options

Option | Possible value | Default | Description
--- | --- | --- | ---
`top` | integer | 0 | Top offset whent sticky should be triggered
`animation` | string | '' | UIkit animation class
`clsinit` | string | uk-sticky-init | Init class when the element is sticky for the first time
`clsactive` | string | uk-active | Active class to add, when element is sticky
`clsinactive` | string | '' | Class to add, when element is not sticky
`getWidthFrom` | string | '' | Css selector where to get the width from in sticky mode. By default it takes the width from the created wrapper element.
`media` | integer / string | false | Condition for the active status with a width as integer (e.g. 640) or a css media query
`target` | boolean | false | Make sure that a sticky element is not over a targeted element via location hash on dom-ready.
`showup` | boolean | false | Show sticky element only when scrolling up.
`boundary` | mixed | false | Set to `true` to bind sticky to the parent or a Css selector to bind sticky to a specific element.

### Init element manually

    var sticky = UIkit.sticky(element, { /* options */ });

### Events

Name | Parameter | Description
--- | --- | ---
`active.uk.sticky` | event | Element getting sticky
`inactive.uk.sticky` | event | Element leaving sticky mode