jQuery Plugin For Animated Fixed Elements - Butterfly

Butterfly is a smart jQuery plugin used to make any Html element (e.g. header navigation) stick at the top of the screen when scrolled. Comes with an animation option which allows to reveal the sticky element with smooth transition effects as you scroll the web page from bottom to top.

How to use it:

1. Load the jQuery Javascript Library and the jQuery butterfly plugin at the bottom of your document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/butterfly.min.js"></script>

2. Call the plugin with default options on the target element. This will make the nav always fixed on the top of the web page as you scroll down or up.

$('nav').butterfly();

3. Available options.

$('nav').butterfly({

// the CSS class of fixed element
defaultNameClass: "",

// none, hiddenAnimation, or lineAnimation
butterflyAnimation: "none",

// Enable the smart transitions
smartTransition: true

});

---

This awesome jQuery plugin is developed by Sowee. For more Advanced Usages, please check the demo page or visit the official website.