[sticky] Super Smooth & Easy Javascript Floater On Scroll

Floater is a very smooth and easy javascript float when scrolling, based on an installed set. Supports 3D transitions if available with a reversal of the element.

header sticky on scroll, sticky menu on scroll, position sticky, sticky elements floater plugin, sticky header on scroll javascript

How to make use of it:

1. To use the floater plugin, download and insert the JavaScript file “floater.js” into the document when needed:

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

2. Add the data component="floater" to the target element and define the wrapper and main containers with the following attributes:

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

3. To configure the plugin, simply pass the options to the data-floater-options attribute as follows:

<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
}

make anything sticky on scroll, floater Plugin/Github