Author: | sz-tamas |
---|---|
Views Total: | 265 views |
Official Page: | Go to website |
Last Update: | December 31, 2017 |
License: | MIT |
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 }