Make Anything Sticky On Scroll – floater

Preview:

Description:

floater is a simple yet configurable JavaScript library to make any contents (for example header navigation, sidebar widgets) fixed at the top or bottom of the page when scrolling down or up.

More features:

• Supports CSS3 animations.
• Mobile-friendly.
• Event handlers.

How to use it:

To use the floater plugin, download and insert the JavaScript file ‘floater.js’ into the document when needed:

<script src="floater.js"></script>

Add the data-component="floater" to the target element and specify the wrapper & parent containers using the following attributes:

<div class="floater-wrapper">
  <div class="floater"
       data-component="floater"
       data-floater-container=".content"
       data-floater-parent="body">
       ...
  </div>
</div>

To config the plugin, just pass the options to the data-floater-options attribute as these:

<div class="floater-wrapper">
  <div class="floater"
       data-component="floater"
       data-floater-container=".content"
       data-floater-options='{"paddingTop": "80", "animationDuration": "100"}'>
       ...
  </div>
</div>

{
  // enable animation
  animate: true,
  // duration of animation
  animationDuration: 150,
  // If it is an empty string, top calc will be forced, otherwise it is set by floater
  transform: '', 
  // Top offset
  paddingTop: 0,
  // Bottom offset
  paddingBottom: 0,
  // Skips calc & top change under 768px
  mediaUp: 768,
  // Skips calc & top change above 768px
  mediaDown: 768,
  // If true then recalc or changing top will be skipped
  standby: true
}