Small plugins that slide with forms sticky source code _javascript Tips

Copy Code code as follows:

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

The use of the method is simple: simply introduce the plugin into the page and invoke it with the selector:

Copy Code code as follows:

$ (' #menu15 '). Stickyfloat ({duration:500});
$ (' #menu14 '). Stickyfloat ({duration:500});
$ (' #menu13 '). Stickyfloat ({duration:500});
$ (' #menu12 '). Stickyfloat ({duration:500});

The duration parameter at the back indicates the speed of the slide, the larger the slower.