CSS:
.right {
//то что там стоит сейчас, т.е. bg, margin, padding//
position:relative;
}
.modultable {
position:absolute;
left:10px;
width:240px;
height:100px;
background: #06C;
text-align:center;
color:#fff;
font-size:14px;
}
HTML:
<div id="right class="modulmenu">ololol</div>
<script src="js/jquery.js"></script>
<script src="js/ololo.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#modultable').stickyfloat({ duration: 400 });
});
</script>
JS (ololo):
$.fn.stickyfloat = function(options, lockBottom) {
var $obj = this;
var parentPaddingTop = parseInt($obj.parent().css('padding-top'));
var startOffset = $obj.parent().offset().top;
var opts = $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options);
$obj.css({ position: 'absolute' });
if(opts.lockBottom){
var bottomPos = $obj.parent().height() - $obj.height() + parentPaddingTop;
if( bottomPos < 0 )
bottomPos = 0;
}
$(window).scroll(function () {
$obj.stop();
var pastStartOffset = $(document).scrollTop() > opts.startOffset;
var objFartherThanTopPos = $obj.offset().top > startOffset;
var objBiggerThanWindow = $obj.outerHeight() < $(window).height();
if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){
var newpos = ($(document).scrollTop() -startOffset + opts.offsetY );
if ( newpos > bottomPos )
newpos = bottomPos;
if ( $(document).scrollTop() < opts.startOffset )
newpos = parentPaddingTop;
$obj.animate({ top: newpos }, opts.duration );
}
});
};
