diff --git a/jquery-scrolltofixed-min.js b/jquery-scrolltofixed-min.js index 3c022aa..ae4ddaa 100644 --- a/jquery-scrolltofixed-min.js +++ b/jquery-scrolltofixed-min.js @@ -1 +1 @@ -(function(a){a.isScrollToFixed=function(b){return !!a(b).data("ScrollToFixed")};a.ScrollToFixed=function(d,i){var m=this;m.$el=a(d);m.el=d;m.$el.data("ScrollToFixed",m);var c=false;var H=m.$el;var I;var F;var k;var e;var z;var E=0;var r=0;var j=-1;var f=-1;var u=null;var A;var g;function v(){H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed");f=-1;E=H.offset().top;r=H.offset().left;if(m.options.offsets){r+=(H.offset().left-H.position().left)}if(j==-1){j=r}I=H.css("position");c=true;if(m.options.bottom!=-1){H.trigger("preFixed.ScrollToFixed");x();H.trigger("fixed.ScrollToFixed")}}function o(){var J=m.options.limit;if(!J){return 0}if(typeof(J)==="function"){return J.apply(H)}return J}function q(){return I==="fixed"}function y(){return I==="absolute"}function h(){return !(q()||y())}function x(){if(!q()){var J=H[0].getBoundingClientRect();u.css({display:H.css("display"),width:J.width,height:J.height,"float":H.css("float")});cssOptions={"z-index":m.options.zIndex,position:"fixed",top:m.options.bottom==-1?t():"",bottom:m.options.bottom==-1?"":m.options.bottom,"margin-left":"0px"};if(!m.options.dontSetWidth){cssOptions.width=H.css("width")}H.css(cssOptions);H.addClass(m.options.baseClassName);if(m.options.className){H.addClass(m.options.className)}I="fixed"}}function b(){var K=o();var J=r;if(m.options.removeOffsets){J="";K=K-E}cssOptions={position:"absolute",top:K,left:J,"margin-left":"0px",bottom:""};if(!m.options.dontSetWidth){cssOptions.width=H.css("width")}H.css(cssOptions);I="absolute"}function l(){if(!h()){f=-1;u.css("display","none");H.css({"z-index":z,width:"",position:F,left:"",top:e,"margin-left":""});H.removeClass("scroll-to-fixed-fixed");if(m.options.className){H.removeClass(m.options.className)}I=null}}function w(J){if(J!=f){H.css("left",r-J);f=J}}function t(){var J=m.options.marginTop;if(!J){return 0}if(typeof(J)==="function"){return J.apply(H)}return J}function B(){if(!a.isScrollToFixed(H)||H.is(":hidden")){return}var M=c;var L=h();if(!c){v()}else{if(h()){E=H.offset().top;r=H.offset().left}}var J=a(window).scrollLeft();var N=a(window).scrollTop();var K=o();if(m.options.minWidth&&a(window).width()m.options.maxWidth){if(!h()||!M){p();H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed")}}else{if(m.options.bottom==-1){if(K>0&&N>=K-t()){if(!L&&(!y()||!M)){p();H.trigger("preAbsolute.ScrollToFixed");b();H.trigger("unfixed.ScrollToFixed")}}else{if(N>=E-t()){if(!q()||!M){p();H.trigger("preFixed.ScrollToFixed");x();f=-1;H.trigger("fixed.ScrollToFixed")}w(J)}else{if(!h()||!M){p();H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed")}}}}else{if(K>0){if(N+a(window).height()-H.outerHeight(true)>=K-(t()||-n())){if(q()){p();H.trigger("preUnfixed.ScrollToFixed");if(F==="absolute"){b()}else{l()}H.trigger("unfixed.ScrollToFixed")}}else{if(!q()){p();H.trigger("preFixed.ScrollToFixed");x()}w(J);H.trigger("fixed.ScrollToFixed")}}else{w(J)}}}}}function n(){if(!m.options.bottom){return 0}return m.options.bottom}function p(){var J=H.css("position");if(J=="absolute"){H.trigger("postAbsolute.ScrollToFixed")}else{if(J=="fixed"){H.trigger("postFixed.ScrollToFixed")}else{H.trigger("postUnfixed.ScrollToFixed")}}}var D=function(J){if(H.is(":visible")){c=false;B()}};var G=function(J){(!!window.requestAnimationFrame)?requestAnimationFrame(B):B()};var C=function(){var K=document.body;if(document.createElement&&K&&K.appendChild&&K.removeChild){var M=document.createElement("div");if(!M.getBoundingClientRect){return null}M.innerHTML="x";M.style.cssText="position:fixed;top:100px;";K.appendChild(M);var N=K.style.height,O=K.scrollTop;K.style.height="3000px";K.scrollTop=500;var J=M.getBoundingClientRect().top;K.style.height=N;var L=(J===100);K.removeChild(M);K.scrollTop=O;return L}return null};var s=function(J){J=J||window.event;if(J.preventDefault){J.preventDefault()}J.returnValue=false};m.init=function(){m.options=a.extend({},a.ScrollToFixed.defaultOptions,i);z=H.css("z-index");m.$el.css("z-index",m.options.zIndex);u=a("
");I=H.css("position");F=H.css("position");k=H.css("float");e=H.css("top");if(h()){m.$el.after(u)}a(window).bind("resize.ScrollToFixed",D);a(window).bind("scroll.ScrollToFixed",G);if("ontouchmove" in window){a(window).bind("touchmove.ScrollToFixed",B)}if(m.options.preFixed){H.bind("preFixed.ScrollToFixed",m.options.preFixed)}if(m.options.postFixed){H.bind("postFixed.ScrollToFixed",m.options.postFixed)}if(m.options.preUnfixed){H.bind("preUnfixed.ScrollToFixed",m.options.preUnfixed)}if(m.options.postUnfixed){H.bind("postUnfixed.ScrollToFixed",m.options.postUnfixed)}if(m.options.preAbsolute){H.bind("preAbsolute.ScrollToFixed",m.options.preAbsolute)}if(m.options.postAbsolute){H.bind("postAbsolute.ScrollToFixed",m.options.postAbsolute)}if(m.options.fixed){H.bind("fixed.ScrollToFixed",m.options.fixed)}if(m.options.unfixed){H.bind("unfixed.ScrollToFixed",m.options.unfixed)}if(m.options.spacerClass){u.addClass(m.options.spacerClass)}H.bind("resize.ScrollToFixed",function(){u.height(H.height())});H.bind("scroll.ScrollToFixed",function(){H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed");B()});H.bind("detach.ScrollToFixed",function(J){s(J);H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed");a(window).unbind("resize.ScrollToFixed",D);a(window).unbind("scroll.ScrollToFixed",G);H.unbind(".ScrollToFixed");u.remove();m.$el.removeData("ScrollToFixed")});D()};m.init()};a.ScrollToFixed.defaultOptions={marginTop:0,limit:0,bottom:-1,zIndex:1000,baseClassName:"scroll-to-fixed-fixed"};a.fn.scrollToFixed=function(b){return this.each(function(){(new a.ScrollToFixed(this,b))})}})(jQuery); \ No newline at end of file +!function(a){a.isScrollToFixed=function(b){return!!a(b).data("ScrollToFixed")},a.ScrollToFixed=function(b,c){function u(){f.trigger("preUnfixed.ScrollToFixed"),B(),f.trigger("unfixed.ScrollToFixed"),o=-1,l=f.offset().top,m=f.offset().left,d.options.offsets&&(m+=f.offset().left-f.position().left),-1==n&&(n=m),g=f.css("position"),e=!0,-1!=d.options.bottom&&(f.trigger("preFixed.ScrollToFixed"),z(),f.trigger("fixed.ScrollToFixed"))}function v(){var a=d.options.limit;return a?"function"==typeof a?a.apply(f):a:0}function w(){return"fixed"===g}function x(){return"absolute"===g}function y(){return!(w()||x())}function z(){if(!w()){var a=f[0].getBoundingClientRect();p.css({display:f.css("display"),width:a.width,height:a.height,"float":i}),cssOptions={"z-index":d.options.zIndex,position:"fixed",top:-1==d.options.bottom?D():"",bottom:-1==d.options.bottom?"":d.options.bottom,"margin-left":"0px"},d.options.dontSetWidth||(cssOptions.width=a.width),f.css(cssOptions),f.addClass(d.options.baseClassName),d.options.className&&f.addClass(d.options.className),g="fixed"}}function A(){var a=t.offset(),b=v()-a.top,c=m-a.left;d.options.removeOffsets&&(c="",b-=l),cssOptions={position:"absolute",top:b,left:c,"margin-left":"0px",bottom:""},d.options.dontSetWidth||(cssOptions.width=f[0].getBoundingClientRect().width),f.css(cssOptions),p.css("display",f.css("display")),g="absolute"}function B(){y()||(o=-1,p.css("display","none"),f.css({"z-index":k,width:"",position:h,left:"",top:j,"margin-left":""}),f.removeClass("scroll-to-fixed-fixed"),d.options.className&&f.removeClass(d.options.className),g=null)}function C(a){a!=o&&(f.css("left",m-a),o=a)}function D(){var a=d.options.marginTop;return a?"function"==typeof a?a.apply(f):a:0}function E(){if(a.isScrollToFixed(f)&&!f.is(":hidden")){var b=e,c=y();e?y()&&(l=f.offset().top,m=f.offset().left):u();var g=s.scrollLeft(),i=s.scrollTop(),j=v();d.options.minWidth&&s.width()d.options.maxWidth?y()&&b||(G(),f.trigger("preUnfixed.ScrollToFixed"),B(),f.trigger("unfixed.ScrollToFixed")):-1==d.options.bottom?j>0&&i>=j-D()?c||x()&&b||(G(),f.trigger("preAbsolute.ScrollToFixed"),A(),f.trigger("unfixed.ScrollToFixed")):i>=l-D()?(w()&&b||(G(),f.trigger("preFixed.ScrollToFixed"),z(),o=-1,f.trigger("fixed.ScrollToFixed")),C(g)):y()&&b||(G(),f.trigger("preUnfixed.ScrollToFixed"),B(),f.trigger("unfixed.ScrollToFixed")):j>0?i+window.innerHeight-f.outerHeight(!0)>=j-(D()||-F())?w()&&(G(),f.trigger("preUnfixed.ScrollToFixed"),"absolute"===h?A():B(),f.trigger("unfixed.ScrollToFixed")):(w()||(G(),f.trigger("preFixed.ScrollToFixed"),z()),C(g),f.trigger("fixed.ScrollToFixed")):C(g)}}function F(){return d.options.bottom?d.options.bottom:0}function G(){var a=f.css("position");"absolute"==a?f.trigger("postAbsolute.ScrollToFixed"):"fixed"==a?f.trigger("postFixed.ScrollToFixed"):f.trigger("postUnfixed.ScrollToFixed")}var d=this;d.$el=a(b),d.el=b,d.$el.data("ScrollToFixed",d);var g,h,i,j,k,e=!1,f=d.$el,l=0,m=0,n=-1,o=-1,p=null,s=a(window),t=a(f[0].offsetParent),H=function(){f.is(":visible")&&(e=!1,E())},I=function(){window.requestAnimationFrame?requestAnimationFrame(E):E()},K=function(a){a=a||window.event,a.preventDefault&&a.preventDefault(),a.returnValue=!1};d.init=function(){d.options=a.extend({},a.ScrollToFixed.defaultOptions,c),k=f.css("z-index"),d.$el.css("z-index",d.options.zIndex),p=a("
").css("display","none"),g=f.css("position"),h=f.css("position"),i=f.css("float"),j=f.css("top"),y()&&d.$el.after(p),s.bind("resize.ScrollToFixed",H),s.bind("scroll.ScrollToFixed",I),"ontouchmove"in window&&s.bind("touchmove.ScrollToFixed",E),d.options.preFixed&&f.bind("preFixed.ScrollToFixed",d.options.preFixed),d.options.postFixed&&f.bind("postFixed.ScrollToFixed",d.options.postFixed),d.options.preUnfixed&&f.bind("preUnfixed.ScrollToFixed",d.options.preUnfixed),d.options.postUnfixed&&f.bind("postUnfixed.ScrollToFixed",d.options.postUnfixed),d.options.preAbsolute&&f.bind("preAbsolute.ScrollToFixed",d.options.preAbsolute),d.options.postAbsolute&&f.bind("postAbsolute.ScrollToFixed",d.options.postAbsolute),d.options.fixed&&f.bind("fixed.ScrollToFixed",d.options.fixed),d.options.unfixed&&f.bind("unfixed.ScrollToFixed",d.options.unfixed),d.options.spacerClass&&p.addClass(d.options.spacerClass),f.bind("resize.ScrollToFixed",function(){p.height(f.height())}),f.bind("detach.ScrollToFixed",function(a){K(a),f.trigger("preUnfixed.ScrollToFixed"),B(),f.trigger("unfixed.ScrollToFixed"),s.unbind("resize.ScrollToFixed",H),s.unbind("scroll.ScrollToFixed",I),f.unbind(".ScrollToFixed"),p.remove(),d.$el.removeData("ScrollToFixed")}),H()},d.init()},a.ScrollToFixed.defaultOptions={marginTop:0,limit:0,bottom:-1,zIndex:1e3,baseClassName:"scroll-to-fixed-fixed"},a.fn.scrollToFixed=function(b){return this.each(function(){new a.ScrollToFixed(this,b)})}}(jQuery); \ No newline at end of file diff --git a/jquery-scrolltofixed.js b/jquery-scrolltofixed.js index 2231301..c8df30f 100644 --- a/jquery-scrolltofixed.js +++ b/jquery-scrolltofixed.js @@ -58,6 +58,9 @@ var className; + var $window = $(window); + var $offsetParent = $(target[0].offsetParent); + // Capture the original offsets for the target element. This needs to be // called whenever the page size changes or when the page is first // scrolled. For some reason, calling this before the page is first @@ -138,7 +141,7 @@ 'display' : target.css('display'), 'width' : dimensions.width, 'height' : dimensions.height, - 'float' : target.css('float') + 'float' : originalFloat }); // Set the target element to fixed and set its width so it does @@ -152,7 +155,9 @@ 'bottom' : base.options.bottom == -1?'':base.options.bottom, 'margin-left' : '0px' } - if (!base.options.dontSetWidth){ cssOptions['width']=target.css('width'); }; + if (!base.options.dontSetWidth) { + cssOptions['width'] = dimensions.width; + }; target.css(cssOptions); @@ -168,8 +173,9 @@ function setAbsolute() { - var top = getLimit(); - var left = offsetLeft; + var parentOffset = $offsetParent.offset(); + var top = getLimit() - parentOffset.top; + var left = offsetLeft - parentOffset.left; if (base.options.removeOffsets) { left = ''; @@ -183,10 +189,16 @@ 'margin-left' : '0px', 'bottom' : '' } - if (!base.options.dontSetWidth){ cssOptions['width']=target.css('width'); }; + if (!base.options.dontSetWidth) { + cssOptions['width'] = target[0].getBoundingClientRect().width; + }; target.css(cssOptions); + // If the static target becomes absolute positioned + // it requires the spacer. + spacer.css('display', target.css('display')); + position = 'absolute'; } @@ -248,6 +260,7 @@ // Checks to see if we need to do something based on new scroll position // of the page. function checkScroll() { + if (!$.isScrollToFixed(target) || target.is(':hidden')) return; var wasReset = isReset; var wasUnfixed = isUnfixed(); @@ -268,10 +281,10 @@ } // Grab the current horizontal scroll position. - var x = $(window).scrollLeft(); + var x = $window.scrollLeft(); // Grab the current vertical scroll position. - var y = $(window).scrollTop(); + var y = $window.scrollTop(); // Get the limit, if there is one. var limit = getLimit(); @@ -279,14 +292,14 @@ // If the vertical scroll position, plus the optional margin, would // put the target element at the specified limit, set the target // element to absolute. - if (base.options.minWidth && $(window).width() < base.options.minWidth) { + if (base.options.minWidth && $window.width() < base.options.minWidth) { if (!isUnfixed() || !wasReset) { postPosition(); target.trigger('preUnfixed.ScrollToFixed'); setUnfixed(); target.trigger('unfixed.ScrollToFixed'); } - } else if (base.options.maxWidth && $(window).width() > base.options.maxWidth) { + } else if (base.options.maxWidth && $window.width() > base.options.maxWidth) { if (!isUnfixed() || !wasReset) { postPosition(); target.trigger('preUnfixed.ScrollToFixed'); @@ -335,7 +348,7 @@ } } else { if (limit > 0) { - if (y + $(window).height() - target.outerHeight(true) >= limit - (getMarginTop() || -getBottom())) { + if (y + window.innerHeight - target.outerHeight(true) >= limit - (getMarginTop() || -getBottom())) { if (isFixed()) { postPosition(); target.trigger('preUnfixed.ScrollToFixed'); @@ -455,7 +468,7 @@ // Create a spacer element to fill the void left by the target // element when it goes fixed. - spacer = $('
'); + spacer = $('
').css('display', 'none'); position = target.css('position'); originalPosition = target.css('position'); @@ -467,16 +480,16 @@ // Reset the target element offsets when the window is resized, then // check to see if we need to fix or unfix the target element. - $(window).bind('resize.ScrollToFixed', windowResize); + $window.bind('resize.ScrollToFixed', windowResize); // When the window scrolls, check to see if we need to fix or unfix // the target element. - $(window).bind('scroll.ScrollToFixed', windowScroll); + $window.bind('scroll.ScrollToFixed', windowScroll); // For touch devices, call checkScroll directlly rather than // rAF wrapped windowScroll to animate the element if ('ontouchmove' in window) { - $(window).bind('touchmove.ScrollToFixed', checkScroll); + $window.bind('touchmove.ScrollToFixed', checkScroll); } if (base.options.preFixed) { @@ -512,12 +525,13 @@ spacer.height(target.height()); }); - target.bind('scroll.ScrollToFixed', function() { - target.trigger('preUnfixed.ScrollToFixed'); - setUnfixed(); - target.trigger('unfixed.ScrollToFixed'); - checkScroll(); - }); + // If the target has scrollbars this code breaks its behaviour. + // target.bind('scroll.ScrollToFixed', function() { + // target.trigger('preUnfixed.ScrollToFixed'); + // setUnfixed(); + // target.trigger('unfixed.ScrollToFixed'); + // checkScroll(); + // }); target.bind('detach.ScrollToFixed', function(ev) { preventDefault(ev); @@ -526,17 +540,15 @@ setUnfixed(); target.trigger('unfixed.ScrollToFixed'); - $(window).unbind('resize.ScrollToFixed', windowResize); - $(window).unbind('scroll.ScrollToFixed', windowScroll); + $window.unbind('resize.ScrollToFixed', windowResize); + $window.unbind('scroll.ScrollToFixed', windowScroll); target.unbind('.ScrollToFixed'); //remove spacer from dom spacer.remove(); - base.$el.removeData('ScrollToFixed'); }); - // Reset everything. windowResize(); };