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