随窗体滑动的小插件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参数表示滑动的速度,越大越慢。 |