Stickies

Stickies are fixed to the top of the screen when the document scrolls past the top boundary of their sticky rail container and are released back to the natural document flow when the document scrolls past the bottom sticky rail boundary.

• Sticky element component
• Usage
  • Javascript events

Sticky element component

The sticky rail is defined by applying a sticky-rail class on a container, while the sticky element is defined by applying a sticky class on an element inside the sticky rail. Applying a sticky-absolute class on the sticky element positions it absolutely inside the sticky rail container.

Multiple instances of stickies and sticky rails are allowed in the same document. Each sticky element is bound only to its closest sticky rail when traversing up through its ancestors in the DOM tree.

When the sticky element sticks to the top of the screen, it is rendered as if it's elevating above sticky rail content, as shown in the example below.

Copy<div class="sticky-rail" style="height:300px;">
  <div class="sticky sticky-absolute">
    Sticky element
  </div>
  Sticky rail
</div>

Stickies can by accompanied by the following data-attributes:

• The data-offset-top attribute, that defines the distance (in pixels) from the top of the screen that triggers the sticky element position change.
• The data-offset-bottom attribute, that defines the distance (in pixels) from the bottom of the sticky rail container that releases the sticky element back to the normal document flow.

The following example shows stickies with different data offset attributes.

Copy<div class="row">
<div class="col-xxs-12 col-sm-4">
  <div class="sticky-rail" style="height:300px;">
    <div class="sticky sticky-absolute">
      No offset
    </div>
    Sticky rail
  </div>
</div>
<div class="col-xxs-12 col-sm-4">
  <div class="sticky-rail" style="height:300px;">
    <div class="sticky sticky-absolute" data-offset-top="40">
      Top offset 40px
    </div>
    Sticky rail
  </div>
</div>
<div class="col-xxs-12 col-sm-4">
  <div class="sticky-rail" style="height:300px;">
    <div class="sticky sticky-absolute" data-offset-bottom="40">
      Bottom offset 40px
    </div>
    Sticky rail
  </div>
</div>
</div>

The sticky rails were invented to simplify the process of defining the boundaries between which an element is sticky, that would otherwise require complex Javascript. Sticky rails can be manipulated using CSS so that they also respond to resolution changes.

Depending on the height of the sticky element compared to its sticky rail container height and window height, the following 3 case scenarios might occur:

• If the sticky element height is smaller than its sticky rail container, it sticks at the top of the screen when the document scrolls past the top sticky rail boundary and is released when the document scrolls past the bottom sticky rail boundary.
• If the sticky element height is equal to or larger than its sticky rail container, it remains idle in the document flow and does not stick to the top of the screen.
• If the sticky element height is smaller than its sticky rail container but larger than the window height, it will start scrolling along with the document until the sticky element bottom part reaches the bottom of the window and will be released when the document scrolls past the bottom sticky rail boundary.

Copy<div class="row">
<div class="col-xxs-12 col-sm-4">
  <div class="sticky-rail" style="height:800px;">
    <div class="sticky sticky-absolute">
      Sticky element height is smaller compared to its sticky rail height
    </div>
    Sticky rail
  </div>
</div>
<div class="col-xxs-12 col-sm-4">
  <div class="sticky-rail" style="height:800px;">
    <div class="sticky sticky-absolute">
      Sticky element height is equal to or larger compared to its sticky rail height. Element remains idle in the document flow.
    </div>
    Sticky rail
  </div>
</div>
<div class="col-xxs-12 col-sm-4">
  <div class="sticky-rail" style="height:800px;">
    <div class="sticky sticky-absolute">
      Sticky element height is smaller compared to its sticky rail height, but larger than window height. Resize your browser window vertically until this sticky element height exceeds window height.<br>
      <br>
      Line 1<br>
      Line 2<br>
      Line 3<br>
      Line 4<br>
      Line 5<br>
      Line 6<br>
      Line 7<br>
      Line 8<br>
      Line 9<br>
      Line 10<br>
      Line 11<br>
      Line 12<br>
      Line 13<br>
      Line 14<br>
      Line 15
    </div>
    Sticky rail
  </div>
</div>
</div>

Usage

Sticky functionality is enabled simply by using the required markup; a sticky element inside a sticky-rail container.

HTML Markup

Copy<div class="sticky-rail" style="height:300px;">
  <div class="sticky sticky-absolute">
    Sticky element
  </div>
  Sticky rail
</div>

Javascript events

Stickies expose events at specific triggering points to extend component functionality. Each event instance fires as soon as the pre-specified hooks are reached within the Javascript code. The following events are available for the sticky element components.

Keep in mind that in cases where the sticky element height is equal to or larger than its sticky rail container height, there are no event fires.

Copy$('#id').on('stickied.sky.sticky', function(e) {
  // Extend function
});

Copy$('#id').on('unstickied.sky.sticky', function(e) {
  // Extend function
});