Skip to content

Instantly share code, notes, and snippets.

@ryanemitchell
Last active September 27, 2017 20:51
Show Gist options
  • Save ryanemitchell/e68b1aa10a6059ad8594afa90e58aa64 to your computer and use it in GitHub Desktop.
Save ryanemitchell/e68b1aa10a6059ad8594afa90e58aa64 to your computer and use it in GitHub Desktop.
Sticky-kit v1.1.4 Phantom Scrolling Issue fixed
/**
@license Sticky-kit v1.1.4 | MIT | Leaf Corcoran 2015 | http://leafo.net
*/
(function(){var t,i,o;t=window.jQuery,o=t(window),i=t(document),t.fn.stick_in_parent=function(e){var s,r,n,l,a,c,p,d,u,f,g,h,k,y,m;for(null==e&&(e={}),y=e.sticky_class,c=e.inner_scrolling,h=e.recalc_every,g=e.parent,u=e.offset_top,d=e.spacer,n=e.bottoming,m=o.height(),s=i.height(),null==u&&(u=0),null==g&&(g=void 0),null==c&&(c=!0),null==y&&(y="is_stuck"),null==n&&(n=!0),f=function(t){var i,o;return window.getComputedStyle?(t[0],i=window.getComputedStyle(t[0]),o=parseFloat(i.getPropertyValue("width"))+parseFloat(i.getPropertyValue("margin-left"))+parseFloat(i.getPropertyValue("margin-right")),"border-box"!==i.getPropertyValue("box-sizing")&&(o+=parseFloat(i.getPropertyValue("border-left-width"))+parseFloat(i.getPropertyValue("border-right-width"))+parseFloat(i.getPropertyValue("padding-left"))+parseFloat(i.getPropertyValue("padding-right"))),o):t.outerWidth(!0)},l=function(e,r,l,a,p,k,v,b){var w,_,x,P,V,F,C,z,I,A,M,S;if(!e.data("sticky_kit")){if(e.data("sticky_kit",!0),V=s,C=e.parent(),null!=g&&(C=C.closest(g)),!C.length)throw"failed to find stick parent";if(x=!1,w=!1,(M=null!=d?d&&e.closest(d):t("<div />"))&&M.css("position",e.css("position")),(z=function(){var t,n,c;if(!b)return m=o.height(),s=i.height(),V=s,t=parseInt(C.css("border-top-width"),10),n=parseInt(C.css("padding-top"),10),r=parseInt(C.css("padding-bottom"),10),l=C.offset().top+t+n,a=C.height(),x&&(x=!1,w=!1,null==d&&(e.insertAfter(M),M.detach()),e.css({position:"",top:"",width:"",bottom:""}).removeClass(y),c=!0),p=e.offset().top-(parseInt(e.css("margin-top"),10)||0)-u,k=e.outerHeight(!0),v=e.css("float"),M&&M.css({width:f(e),height:k,display:e.css("display"),"vertical-align":e.css("vertical-align"),float:v}),c?S():void 0})(),k!==a)return P=void 0,F=u,A=h,S=function(){var t,i,f,g,_;if(!b)return f=!1,null!=A&&(A-=1)<=0&&(A=h,z(),f=!0),f||s===V||(z(),f=!0),g=o.scrollTop(),null!=P&&(i=g-P),P=g,x?(n&&(_=g+k+F>a+l,w&&!_&&(w=!1,e.css({position:"fixed",bottom:"",top:F}).trigger("sticky_kit:unbottom"))),g<p&&(x=!1,F=u,null==d&&("left"!==v&&"right"!==v||e.insertAfter(M),M.detach()),t={position:"",width:"",top:""},e.css(t).removeClass(y).trigger("sticky_kit:unstick")),c&&k+u>m&&(w||(F-=i,F=Math.max(m-k,F),F=Math.min(u,F),x&&e.css({top:F+"px"})))):g>p&&(x=!0,(t={position:"fixed",top:F}).width="border-box"===e.css("box-sizing")?e.outerWidth()+"px":e.width()+"px",e.css(t).addClass(y),null==d&&(e.after(M),"left"!==v&&"right"!==v||M.append(e)),e.trigger("sticky_kit:stick")),x&&n&&(null==_&&(_=g+k+F>a+l),!w&&_)?(w=!0,"static"===C.css("position")&&C.css({position:"relative"}),e.css({position:"absolute",bottom:r,top:"auto"}).trigger("sticky_kit:bottom")):void 0},I=function(){return z(),S()},_=function(){if(b=!0,o.off("touchmove",S),o.off("scroll",S),o.off("resize",I),t(document.body).off("sticky_kit:recalc",I),e.off("sticky_kit:detach",_),e.removeData("sticky_kit"),e.css({position:"",bottom:"",top:"",width:""}),C.position("position",""),x)return null==d&&("left"!==v&&"right"!==v||e.insertAfter(M),M.remove()),e.removeClass(y)},o.on("touchmove",S),o.on("scroll",S),o.on("resize",I),t(document.body).on("sticky_kit:recalc",I),e.on("sticky_kit:detach",_),setTimeout(S,0)}},a=0,p=(k=this).length;a<p;a++)r=k[a],l(t(r));return this}}).call(this);
// Generated by CoffeeScript 1.12.3
/**
@license Sticky-kit v1.1.4 | MIT | Leaf Corcoran 2015 | http://leafo.net
*/
(function() {
var $, doc, win;
$ = window.jQuery;
win = $(window);
doc = $(document);
$.fn.stick_in_parent = function(opts) {
var doc_height, elm, enable_bottoming, fn, i, inner_scrolling, len, manual_spacer, offset_top, outer_width, parent_selector, recalc_every, ref, sticky_class, win_height;
if (opts == null) {
opts = {};
}
sticky_class = opts.sticky_class, inner_scrolling = opts.inner_scrolling, recalc_every = opts.recalc_every, parent_selector = opts.parent, offset_top = opts.offset_top, manual_spacer = opts.spacer, enable_bottoming = opts.bottoming;
win_height = win.height();
doc_height = doc.height();
if (offset_top == null) {
offset_top = 0;
}
if (parent_selector == null) {
parent_selector = void 0;
}
if (inner_scrolling == null) {
inner_scrolling = true;
}
if (sticky_class == null) {
sticky_class = "is_stuck";
}
if (enable_bottoming == null) {
enable_bottoming = true;
}
outer_width = function(el) {
var _el, computed, w;
if (window.getComputedStyle) {
_el = el[0];
computed = window.getComputedStyle(el[0]);
w = parseFloat(computed.getPropertyValue("width")) + parseFloat(computed.getPropertyValue("margin-left")) + parseFloat(computed.getPropertyValue("margin-right"));
if (computed.getPropertyValue("box-sizing") !== "border-box") {
w += parseFloat(computed.getPropertyValue("border-left-width")) + parseFloat(computed.getPropertyValue("border-right-width")) + parseFloat(computed.getPropertyValue("padding-left")) + parseFloat(computed.getPropertyValue("padding-right"));
}
return w;
} else {
return el.outerWidth(true);
}
};
ref = this;
fn = function(elm, padding_bottom, parent_top, parent_height, top, height, el_float, detached) {
var bottomed, detach, fixed, last_pos, last_scroll_height, offset, parent, recalc, recalc_and_tick, recalc_counter, spacer, tick;
if (elm.data("sticky_kit")) {
return;
}
elm.data("sticky_kit", true);
last_scroll_height = doc_height;
parent = elm.parent();
if (parent_selector != null) {
parent = parent.closest(parent_selector);
}
if (!parent.length) {
throw "failed to find stick parent";
}
fixed = false;
bottomed = false;
spacer = manual_spacer != null ? manual_spacer && elm.closest(manual_spacer) : $("<div />");
if (spacer) {
spacer.css('position', elm.css('position'));
}
recalc = function() {
var border_top, padding_top, restore;
if (detached) {
return;
}
win_height = win.height();
doc_height = doc.height();
last_scroll_height = doc_height;
border_top = parseInt(parent.css("border-top-width"), 10);
padding_top = parseInt(parent.css("padding-top"), 10);
padding_bottom = parseInt(parent.css("padding-bottom"), 10);
parent_top = parent.offset().top + border_top + padding_top;
parent_height = parent.height();
if (fixed) {
fixed = false;
bottomed = false;
if (manual_spacer == null) {
elm.insertAfter(spacer);
spacer.detach();
}
elm.css({
position: "",
top: "",
width: "",
bottom: ""
}).removeClass(sticky_class);
restore = true;
}
top = elm.offset().top - (parseInt(elm.css("margin-top"), 10) || 0) - offset_top;
height = elm.outerHeight(true);
el_float = elm.css("float");
if (spacer) {
spacer.css({
width: outer_width(elm),
height: height,
display: elm.css("display"),
"vertical-align": elm.css("vertical-align"),
"float": el_float
});
}
if (restore) {
return tick();
}
};
recalc();
if (height === parent_height) {
return;
}
last_pos = void 0;
offset = offset_top;
recalc_counter = recalc_every;
tick = function() {
var css, delta, recalced, scroll, will_bottom;
if (detached) {
return;
}
recalced = false;
if (recalc_counter != null) {
recalc_counter -= 1;
if (recalc_counter <= 0) {
recalc_counter = recalc_every;
recalc();
recalced = true;
}
}
if (!recalced && doc_height !== last_scroll_height) {
recalc();
recalced = true;
}
scroll = win.scrollTop();
if (last_pos != null) {
delta = scroll - last_pos;
}
last_pos = scroll;
if (fixed) {
if (enable_bottoming) {
will_bottom = scroll + height + offset > parent_height + parent_top;
if (bottomed && !will_bottom) {
bottomed = false;
elm.css({
position: "fixed",
bottom: "",
top: offset
}).trigger("sticky_kit:unbottom");
}
}
if (scroll < top) {
fixed = false;
offset = offset_top;
if (manual_spacer == null) {
if (el_float === "left" || el_float === "right") {
elm.insertAfter(spacer);
}
spacer.detach();
}
css = {
position: "",
width: "",
top: ""
};
elm.css(css).removeClass(sticky_class).trigger("sticky_kit:unstick");
}
if (inner_scrolling) {
if (height + offset_top > win_height) {
if (!bottomed) {
offset -= delta;
offset = Math.max(win_height - height, offset);
offset = Math.min(offset_top, offset);
if (fixed) {
elm.css({
top: offset + "px"
});
}
}
}
}
} else {
if (scroll > top) {
fixed = true;
css = {
position: "fixed",
top: offset
};
css.width = elm.css("box-sizing") === "border-box" ? elm.outerWidth() + "px" : elm.width() + "px";
elm.css(css).addClass(sticky_class);
if (manual_spacer == null) {
elm.after(spacer);
if (el_float === "left" || el_float === "right") {
spacer.append(elm);
}
}
elm.trigger("sticky_kit:stick");
}
}
if (fixed && enable_bottoming) {
if (will_bottom == null) {
will_bottom = scroll + height + offset > parent_height + parent_top;
}
if (!bottomed && will_bottom) {
bottomed = true;
if (parent.css("position") === "static") {
parent.css({
position: "relative"
});
}
return elm.css({
position: "absolute",
bottom: padding_bottom,
top: "auto"
}).trigger("sticky_kit:bottom");
}
}
};
recalc_and_tick = function() {
recalc();
return tick();
};
detach = function() {
detached = true;
win.off("touchmove", tick);
win.off("scroll", tick);
win.off("resize", recalc_and_tick);
$(document.body).off("sticky_kit:recalc", recalc_and_tick);
elm.off("sticky_kit:detach", detach);
elm.removeData("sticky_kit");
elm.css({
position: "",
bottom: "",
top: "",
width: ""
});
parent.position("position", "");
if (fixed) {
if (manual_spacer == null) {
if (el_float === "left" || el_float === "right") {
elm.insertAfter(spacer);
}
spacer.remove();
}
return elm.removeClass(sticky_class);
}
};
win.on("touchmove", tick);
win.on("scroll", tick);
win.on("resize", recalc_and_tick);
$(document.body).on("sticky_kit:recalc", recalc_and_tick);
elm.on("sticky_kit:detach", detach);
return setTimeout(tick, 0);
};
for (i = 0, len = ref.length; i < len; i++) {
elm = ref[i];
fn($(elm));
}
return this;
};
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment