Make Anything Sticky On Scroll – floater

Category: Javascript | December 31, 2017
Author: sz-tamas
Views Total: 173 views
Official Page: Go to website
Last Update: December 31, 2017
License: MIT

Preview:

Make Anything Sticky On Scroll – floater

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

}

You Might Be Interested In:


Leave a Reply