Information
Installation
Step 1
Youn need to include a reference to the jQuery library and the Floatable plugin. You can download jquery from here or making reference to the one hosted by google. And you can download jfloatable plugin from here
<head>
<title>jfloatable Plugin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jfloatable.js" type="text/javascript"></script>
</head>
Step 2
Place element to be floatable inside a container which would delimit the area where the element can move up and down.
Note: The container has to be taller than the floating element for the plugin to work!
<div class="my-container">
<div class="my-floating-element">
This content will float!
</div>
</div>
Step 3
Make a call to the jfloatable method selecting the element.
Start scrolling and see it in action!
<script type="text/javascript">
$(document).ready(function() {
$('.my-floating-element').jfloatable();
});
</script>
Documentation
A basic floating effect can be set up as easy as just adding the following code.
$('selector').jfloatable();
Nevertheless, for this version (0.1), you have to consider the following for the plugin to work properly:
-
The element should be visible in the page (not hidden or loaded after).
-
The container has to be taller than the element.
-
The scroll event for the window element is used in the plugin, binding it to a different action, would disable the plugin from working.
It is possible to customize some options for the floating element by setting the following options:
container
The Container option allows you to specify the element (selector) which would delimit the movement of the floating element. It doesn't have to be the parent, but it would always have to be a direct ancestor of the element.
Default: the parent of the element.
marginTop
The marginTop option allows you the distance above the element that would persist when the window is being scrolled. If you want to apply a margin-top for you floating element, it is better to set it in this option.
Default: 0.
marginBottom
The marginBottom option is the distance below the element that would separate it from the bottom of the container. If you want to apply a margin-bottom for you floating element, it is better to set it in this option.
Default: 0.
Demo
Keep scrolling and see the circles float and stop in each step!
More Info
Special thanks to Carlos Araoz Grageda for the good advices in the realization of this plugin.
TODO: What to put in here