You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.7 KiB
JavaScript
97 lines
3.7 KiB
JavaScript
(function ($) {
|
|
$.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<len; i++) {
|
|
var $this = elements[i];
|
|
|
|
if (options.minWidth && $window.width() <= options.minWidth) {
|
|
if ($this.parent().is(".pin-wrapper")) { $this.unwrap(); }
|
|
$this.css({width: "", left: "", top: "", position: ""});
|
|
if (options.activeClass) { $this.removeClass(options.activeClass); }
|
|
disabled = true;
|
|
continue;
|
|
} else {
|
|
disabled = false;
|
|
}
|
|
|
|
var $container = options.containerSelector ? $this.closest(options.containerSelector) : $(document.body);
|
|
var offset = $this.offset();
|
|
var containerOffset = $container.offset();
|
|
var parentOffset = $this.offsetParent().offset();
|
|
|
|
if (!$this.parent().is(".pin-wrapper")) {
|
|
$this.wrap("<div class='pin-wrapper'>");
|
|
}
|
|
|
|
$this.data("pin", {
|
|
from: options.containerSelector ? containerOffset.top : offset.top,
|
|
to: containerOffset.top + $container.height() - $this.outerHeight(),
|
|
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();
|
|
|
|
for (var i=0, len=elements.length; i<len; i++) {
|
|
var $this = $(elements[i]),
|
|
data = $this.data("pin"),
|
|
from = data.from,
|
|
to = data.to;
|
|
|
|
if (from + $this.outerHeight() > data.end) {
|
|
$this.css('position', '');
|
|
continue;
|
|
}
|
|
|
|
if (from < scrollY && to > scrollY) {
|
|
!($this.css("position") == "fixed") && $this.css({
|
|
left: $this.offset().left,
|
|
top: 0
|
|
}).css("position", "fixed");
|
|
if (options.activeClass) { $this.addClass(options.activeClass); }
|
|
} else if (scrollY >= to) {
|
|
$this.css({
|
|
left: "",
|
|
top: to - data.parentTop
|
|
}).css("position", "absolute");
|
|
if (options.activeClass) { $this.addClass(options.activeClass); }
|
|
} else {
|
|
$this.css({position: "", top: "", left: ""});
|
|
if (options.activeClass) { $this.removeClass(options.activeClass); }
|
|
}
|
|
}
|
|
};
|
|
|
|
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); |