随窗体滑动的小插件sticky源码

  

复制代码 代码如下:

  $.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参数表示滑动的速度,越大越慢。