jFloatable is a jQuery plugin that allows you to fix elements in the screen and delimitates when it should be unfixed.
Default options:
{
limit: 0, // when the fix should stops
top: 0, // margin top after fixed
fixedCss: {}, // css to be added when the element is fixed
absoluteCss: {} // css to be added when the element is absolute
parentRelativeSelector: ".jFloatable-relative", // selector of a parent that has its position relative
}
The element will be fixed when the window offset top touches its top offset. If there is a limit in the configuration when the window offset top touches this limit the element will be set to absolute.
As it can have an absolute position the plugin offers the opportunity to set which parent you want for this position.
$middle = $("#middle")
$("#top").jFloatable({
limit: $middle.offset().top,
fixedCss: {
border: '2px dotted green'
},
absoluteCss: {
border: '1px dotted blue'
}
});
$middle.jFloatable({
top: 50
});