From 2014.igem.org
(function ($) {
"use strict";
$.fn.pin = function (options) {
var scrollY = 0, elements = [], disabled = false, $window = $(window);
options = options || {};
var recalculateLimits = function () {
for (var i=0, len=elements.length; i");
}
var pad = $.extend({
top: 0,
bottom: 0
}, options.padding || {});
$this.data("pin", {
pad: pad,
from: (options.containerSelector ? containerOffset.top : offset.top) - pad.top,
to: containerOffset.top + $container.height() - $this.outerHeight() - pad.bottom,
end: containerOffset.top + $container.height(),
parentTop: parentOffset.top
});
$this.css({width: $this.outerWidth()});
$this.parent().css("height", $this.outerHeight());
}
};
var onScroll = function () {
if (disabled) { return; }
scrollY = $window.scrollTop();
var elmts = [];
for (var i=0, len=elements.length; i data.end) {
$this.css('position', '');
continue;
}
if (from < scrollY && to > scrollY) {
!($this.css("position") == "fixed") && $this.css({
left: $this.offset().left,
top: data.pad.top
}).css("position", "fixed");
if (options.activeClass) { $this.addClass(options.activeClass); }
} else if (scrollY >= to) {
$this.css({
left: "",
top: to - data.parentTop + data.pad.top
}).css("position", "absolute");
if (options.activeClass) { $this.addClass(options.activeClass); }
} else {
$this.css({position: "", top: "", left: ""});
if (options.activeClass) { $this.removeClass(options.activeClass); }
}
}
elements = elmts;
};
var update = function () { recalculateLimits(); onScroll(); };
this.each(function () {
var $this = $(this),
data = $(this).data('pin') || {};
if (data && data.update) { return; }
elements.push($this);
$("img", this).one("load", recalculateLimits);
data.update = update;
$(this).data('pin', data);
});
$window.scroll(onScroll);
$window.resize(function () { recalculateLimits(); });
recalculateLimits();
$window.load(update);
return this;
};
})(jQuery);