[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"

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-floater-options='{"paddingTop": "80", "animationDuration": "100"}'>
  // 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

See Demo And Download

Official Website(sz-tamas): Click Here

This superior jQuery/javascript plugin is developed by sz-tamas. For extra advanced usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…