I wrote a simple
jQuery plugin today, called
Scrollite. This plugin makes it easier to create a float layer, scrolling with the page. Here's the code:
jQuery.fn.scrollite = function(left, margin, duration) {
margin = parseInt(margin) || 0; duration = parseInt(duration) || 0;
return this.each(function() {
var target = jQuery(this).css({position: 'absolute', zIndex: 10000})
.css(left ? 'left' : 'right', margin + 'px');
jQuery(window).bind('load scroll resize', function() {
target.animate({top: (jQuery(window).height() + window.scrollY - target.height() - margin) + 'px'}, duration);
});
});
};
Features & options:
- Float it without writing CSS code.
- Place the float container in the left or right (default);
- Customize the speed of sliding by set duration time in millisecond (Immediately sliding is default behavior);
- Customize the margin by set margin in pixel (default: 0)
Usage:
$('#node').scrollite();
Paramless call, use all default options;$('#node').scrollite(false, 10);
Put it in the right with 10-pixel-margin;$('#node').scrollite(true, 5, 20);
Put it in the left with 5-pixel-margin, complete slide in 20 milliseconds.
Demo:
Just navigate to
this page, and check out the simple code :)