Foundation Laravel Package

title: Sticky description: Stick nearly anything, anywhere you like! video: '5KQmh0Eh-p8' js: js/foundation.sticky.js

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="cell 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="cell 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>

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="cell 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>

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="cell 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>

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>