Внимание
Это липкий блок, фиксируется только в родительском контейнере.
Задача
Начинал фиксироваться как только его полностью показало. Фиксироваться со значением bottom: 0px.
(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<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(".fixscroll")) {
$this.wrap("<div class='fixscroll'>");
}
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<len; i++) {
var $this = $(elements[i]),
data = $this.data("pin");
if (!data) { // Removed element
continue;
}
elmts.push($this);
var from = data.from - data.pad.bottom,
to = data.to - data.pad.top;
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: 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);
