Sticky

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

Examples

Default Style

Add data-am-sticky attribute to element.

<div data-am-sticky>
  <button class="am-btn am-btn-primary am-btn-block">Stick to top</button>
</div>

Define an offset

The offset is default to be 0, which means element will stick at the top of viewport. Offset can be changed by using data-am-sticky="{top:100}".

<div data-am-sticky="{top:80}">
  <button class="am-btn am-btn-primary">Stick 80px below the top</button>
</div>

Animation

Use CSS3 Animation.

<div data-am-sticky="{animation: 'slide-top'}">
  <button class="am-btn am-btn-success am-btn-block">Stick to top with animation</button>
</div>

Usage

Using Data API

As shown above, add data-am-sticky attribute to element.

Using JS

Use $.sticky(options) to initialize the sticky.

<div id="my-sticky">
  <button class="am-btn am-btn-danger">Stick via JavaScript</button>
</div>
<script>
$(function() {
  $('#my-sticky').sticky({
    top: 150
  })
});
</script>

Options

Attention

• Sticky watch the scrolling event of window. When the scrolling distance is larger than the distance between top of element and top, the .am-sticky class will be added to the element. The position of element will be changed to fixed and the top value will be given(Default value is 0).
• The sticky element will be wrapped with a .am-sticky-placeholder after initialize, which can possiblly influence some selectors.
• Problem: When using animation, if the window is resized repidly, the animation will be played multiple times.