Block need to stick to the bottom of the screen. How to do this?

Attention
This is a sticky block that is only in the parent container.

Task
Began to be fixed as soon as it is fully revealed. Recorded with the value 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)" ($this.parent().is(".pin-wrapper")) $this.unwrap(); } $this.css({width: "", left: top: position: ""}); (options.activeclass) $this.removeclass(options.activeclass); disabled="true;" continue; else $container="options.containerSelector" ? $this.closest(options.containerselector) : $(document.body); offset="$this.offset();" containeroffset="$container.offset();" parentoffset="$this.offsetParent().offset();" (!$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); from="data.from" - data.pad.bottom, to="data.to" data.pad.top; ("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);</len;></len;>
July 8th 19 at 11:21
2 answers
July 8th 19 at 11:23
Set the style of view
z-index: 10000000; position: absolute; bottom: 0px; left: 0px;
Then he will give him top: value. - althea29 commented on July 8th 19 at 11:26
July 8th 19 at 11:25
Brilliant. We are talking about the sticky block, which is fixed only in the parent block. - althea29 commented on July 8th 19 at 11:28

Find more questions by tags jQuery