jquery.sticky.min.js

(function($){var Sticky=function(element,userSettings){var $element,isSticky=false,isFollowingParent=false,isReachedEffectsPoint=false,elements={},settings;var defaultSettings={to:"top",offset:0,effectsOffset:0,parent:false,classes:{sticky:"sticky",stickyActive:"sticky-active",stickyEffects:"sticky-effects",spacer:"sticky-spacer"}};var initElements=function(){$element=$(element).addClass(settings.classes.sticky);elements.$window=$(window);if(settings.parent){if("parent"===settings.parent){elements.$parent=$element.parent()}else{elements.$parent=$element.closest(settings.parent)}}};var initSettings=function(){settings=jQuery.extend(true,defaultSettings,userSettings)};var bindEvents=function(){elements.$window.on({scroll:onWindowScroll,resize:onWindowResize})};var unbindEvents=function(){elements.$window.off("scroll",onWindowScroll).off("resize",onWindowResize)};var init=function(){initSettings();initElements();bindEvents();checkPosition()};var backupCSS=function($elementBackupCSS,backupState,properties){var css={},elementStyle=$elementBackupCSS[0].style;properties.forEach(function(property){css[property]=undefined!==elementStyle[property]?elementStyle[property]:""});$elementBackupCSS.data("css-backup-"+backupState,css)};var getCSSBackup=function($elementCSSBackup,backupState){return $elementCSSBackup.data("css-backup-"+backupState)};var addSpacer=function(){elements.$spacer=$element.clone().addClass(settings.classes.spacer).css({visibility:"hidden",transition:"none",animation:"none"});$element.after(elements.$spacer)};var removeSpacer=function(){elements.$spacer.remove()};var stickElement=function(){backupCSS($element,"unsticky",["position","width","margin-top","margin-bottom","top","bottom"]);var css={position:"fixed",width:getElementOuterSize($element,"width"),marginTop:0,marginBottom:0};css[settings.to]=settings.offset;css["top"===settings.to?"bottom":"top"]="";$element.css(css).addClass(settings.classes.stickyActive)};var unstickElement=function(){$element.css(getCSSBackup($element,"unsticky")).removeClass(settings.classes.stickyActive)};var followParent=function(){backupCSS(elements.$parent,"childNotFollowing",["position"]);elements.$parent.css("position","relative");backupCSS($element,"notFollowing",["position","top","bottom"]);var css={position:"absolute"};css[settings.to]="";css["top"===settings.to?"bottom":"top"]=0;$element.css(css);isFollowingParent=true};var unfollowParent=function(){elements.$parent.css(getCSSBackup(elements.$parent,"childNotFollowing"));$element.css(getCSSBackup($element,"notFollowing"));isFollowingParent=false};var getElementOuterSize=function($elementOuterSize,dimension,includeMargins){var computedStyle=getComputedStyle($elementOuterSize[0]),elementSize=parseFloat(computedStyle[dimension]),sides="height"===dimension?["top","bottom"]:["left","right"],propertiesToAdd=[];if("border-box"!==computedStyle.boxSizing){propertiesToAdd.push("border","padding")}if(includeMargins){propertiesToAdd.push("margin")}propertiesToAdd.forEach(function(property){sides.forEach(function(side){elementSize+=parseFloat(computedStyle[property+"-"+side])})});return elementSize};var getElementViewportOffset=function($elementViewportOffset){var windowScrollTop=elements.$window.scrollTop(),elementHeight=getElementOuterSize($elementViewportOffset,"height"),viewportHeight=innerHeight,elementOffsetFromTop=$elementViewportOffset.offset().top,distanceFromTop=elementOffsetFromTop-windowScrollTop,topFromBottom=distanceFromTop-viewportHeight;return{top:{fromTop:distanceFromTop,fromBottom:topFromBottom},bottom:{fromTop:distanceFromTop+elementHeight,fromBottom:topFromBottom+elementHeight}}};var stick=function(){addSpacer();stickElement();isSticky=true;$element.trigger("sticky:stick")};var unstick=function(){unstickElement();removeSpacer();isSticky=false;$element.trigger("sticky:unstick")};var checkParent=function(){var elementOffset=getElementViewportOffset($element),isTop="top"===settings.to;if(isFollowingParent){var isNeedUnfollowing=isTop?elementOffset.top.fromTop>settings.offset:elementOffset.bottom.fromBottom<-settings.offset;if(isNeedUnfollowing){unfollowParent()}}else{var parentOffset=getElementViewportOffset(elements.$parent),parentStyle=getComputedStyle(elements.$parent[0]),borderWidthToDecrease=parseFloat(parentStyle[isTop?"borderBottomWidth":"borderTopWidth"]),parentViewportDistance=isTop?parentOffset.bottom.fromTop-borderWidthToDecrease:parentOffset.top.fromBottom+borderWidthToDecrease,isNeedFollowing=isTop?parentViewportDistance<=elementOffset.bottom.fromTop:parentViewportDistance>=elementOffset.top.fromBottom;if(isNeedFollowing){followParent()}}};var checkEffectsPoint=function(distanceFromTriggerPoint){if(isReachedEffectsPoint&&-distanceFromTriggerPoint<settings.effectsOffset){$element.removeClass(settings.classes.stickyEffects);isReachedEffectsPoint=false}else if(!isReachedEffectsPoint&&-distanceFromTriggerPoint>=settings.effectsOffset){$element.addClass(settings.classes.stickyEffects);isReachedEffectsPoint=true}};var checkPosition=function(){var offset=settings.offset,distanceFromTriggerPoint;if(isSticky){var spacerViewportOffset=getElementViewportOffset(elements.$spacer);distanceFromTriggerPoint="top"===settings.to?spacerViewportOffset.top.fromTop-offset:-spacerViewportOffset.bottom.fromBottom-offset;if(settings.parent){checkParent()}if(distanceFromTriggerPoint>0){unstick()}}else{var elementViewportOffset=getElementViewportOffset($element);distanceFromTriggerPoint="top"===settings.to?elementViewportOffset.top.fromTop-offset:-elementViewportOffset.bottom.fromBottom-offset;if(distanceFromTriggerPoint<=0){stick();if(settings.parent){checkParent()}}}checkEffectsPoint(distanceFromTriggerPoint)};var onWindowScroll=function(){checkPosition()};var onWindowResize=function(){if(!isSticky){return}unstickElement();stickElement();if(settings.parent){isFollowingParent=false;checkParent()}};this.destroy=function(){if(isSticky){unstick()}unbindEvents();$element.removeClass(settings.classes.sticky)};init()};$.fn.sticky=function(settings){var isCommand="string"===typeof settings;this.each(function(){var $this=$(this);if(!isCommand){$this.data("sticky",new Sticky(this,settings));return}var instance=$this.data("sticky");if(!instance){throw Error("Trying to perform the `"+settings+"` method prior to initialization")}if(!instance[settings]){throw ReferenceError("Method `"+settings+"` not found in sticky instance")}instance[settings].apply(instance,Array.prototype.slice.call(arguments,1));if("destroy"===settings){$this.removeData("sticky")}});return this};window.Sticky=Sticky})(jQuery);