@ithaka/bonsai/documentation/pages/components/sticky.md

ITHAKA core styling

---
title: Sticky
description: Elements that remain fixed to a position when scrolling.
js: ./js/bonsai.sticky.js
sass: ./scss/_sticky.scss
foundation: http://foundation.zurb.com/sites/docs/sticky.html
---

## How to use

### Basic sticky

In order for an element to be sticky it needs two components. One is a container element that has a `data-sticky-container` data attribute.
The other element is the child of the container, which will be the stickied element itself, this will need a `.sticky` class and a `data-sticky` data attribute.

Sticky elements can be constrained within elements via the `data-anchor` data attribute.

```html_example
<div class="row plm" id="sticky-example">
    <div class="small-6">
        <p>To the right is a sticky element. Note that it only sticks within this div while you scroll down.</p>
        <p>Lorem ipsum dolor sit amet, an ius efficiendi omittantur. No sit ferri appetere, sit deleniti repudiandae ne. Vel te facete adolescens deterruisset. Ut quod nullam pericula his, te cum dignissim voluptaria, per ei saperet accommodare.</p>
        <p>Ei populo reprehendunt est, insolens scribentur complectitur sed an. Deserunt repudiare interpretaris mea ex. Lorem option principes cum te. Reque quaestio convenire at cum. Has suas nemore praesent no, vitae dicam ocurreret id nec.</p>
    </div>
    <div class="small-6">
        <div id="sticky-container" class="sticky-container" data-sticky-container>
            <div class="sticky" data-sticky data-anchor="sticky-example">
                Sticky text
            </div>
        </div>
    </div>
</div>
```

### Combining with Magellan

The Magellan component that comes with Foundation can be used to make sticky navigations.

http://foundation.zurb.com/sites/docs/magellan.html

```html_example
<div class="row plm" id="sticky-nav-example">
    <div class="small-6">
        <p>To the right is a sticky element. Note that it only sticks within this div while you scroll down.</p>
        <p>Lorem ipsum dolor sit amet, an ius efficiendi omittantur. No sit ferri appetere, sit deleniti repudiandae ne. Vel te facete adolescens deterruisset. Ut quod nullam pericula his, te cum dignissim voluptaria, per ei saperet accommodare.</p>
        <p>Ei populo reprehendunt est, insolens scribentur complectitur sed an. Deserunt repudiare interpretaris mea ex. Lorem option principes cum te. Reque quaestio convenire at cum. Has suas nemore praesent no, vitae dicam ocurreret id nec.</p>    </div>
    <div class="small-6">
        <div id="sticky-container" class="sticky-container" data-sticky-container>
            <div class="sticky" data-sticky data-anchor="sticky-nav-example">
                <ul class="vertical menu" data-magellan>
                  <li><a href="#first">First Link</a></li>
                  <li><a href="#second">Second Link</a></li>
                  <li><a href="#third">Third Link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div

```