复制代码 代码如下:

$.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 );

}

});

};

使用方法很简单：只要在页面中引入该插件，然后用选择器调用：

复制代码 代码如下:

$('#menu15').stickyfloat({ duration: 500 });

$('#menu14').stickyfloat({ duration: 500 });

$('#menu13').stickyfloat({ duration: 500 });

$('#menu12').stickyfloat({ duration: 500 });

后面的duration参数表示滑动的速度，越大越慢。