From 71cc66af5a085a2ad56e135a962248fa73a6ddd9 Mon Sep 17 00:00:00 2001
From: Gordon Koo <gordon@gordonkoo.com>
Date: Mon, 27 Aug 2012 14:34:29 -0700
Subject: [PATCH] handle fixed positioned elements

---
 js/hopscotch-min.js        |  2 +-
 js/hopscotch.js            | 45 +++++++++++++++++++-------------------
 js/hopscotch_jquery-min.js |  2 +-
 js/hopscotch_jquery.js     | 36 +++++++++++++++---------------
 4 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/js/hopscotch-min.js b/js/hopscotch-min.js
index 32906339..550b7b3b 100644
--- a/js/hopscotch-min.js
+++ b/js/hopscotch-min.js
@@ -1 +1 @@
-(function(c,d){var m,e,j,i,g,a,l=c[d],h="undefined",b=false,k=(typeof window.sessionStorage!==h),f=document.body.style;if(l){return}a=function(){if(b){l.startTour()}};if(window.addEventListener){window.addEventListener("load",a)}else{if(window.attachEvent){window.attachEvent("onload",a)}}i={addClass:function(p,r){var o,q,n;if(p.className.length===0){p.className=r}else{o=p.className.split(" ");for(q=0,n=o.length;q<n;++q){if(o[q]===r){return}}o.splice(0,0,r);p.className=o.join(" ")}},removeClass:function(n,s){var r,v,t,q,o,u,p;v=s.split(" ");r=n.className.split(" ");for(q=0,u=v.length;q<u;++q){t=v[q];for(o=0,p=r.length;o<p;++o){if(r[o]===t){break}}if(o<p){r.splice(o,1)}}n.className=r.join(" ")},getPixelValue:function(o){var n=typeof o;if(n==="number"){return o}if(n==="string"){return parseInt(o,10)}return 0},valOrDefault:function(o,n){return typeof o!==h?o:n},invokeCallbacks:function(r,o){var q=g[r],p=0,n=q.length;for(;p<n;++p){q[p].cb.apply(this,o)}},getScrollTop:function(){if(typeof window.pageYOffset!==h){return window.pageYOffset}else{return document.documentElement.scrollTop}},getScrollLeft:function(){if(typeof window.pageXOffset!==h){return window.pageXOffset}else{return document.documentElement.scrollLeft}},getWindowHeight:function(){return window.innerHeight?window.innerHeight:document.documentElement.clientHeight},getWindowWidth:function(){return window.innerWidth?window.innerWidth:document.documentElement.clientWidth},addClickListener:function(o,n){return o.addEventListener?o.addEventListener("click",n):o.attachEvent("onclick",n)},evtPreventDefault:function(n){if(n.preventDefault){n.preventDefault()}else{if(event){event.returnValue=false}}},extend:function(o,n){var p;for(p in n){if(n.hasOwnProperty(p)){o[p]=n[p]}}},getStepTarget:function(n){if(typeof n.target==="string"){return document.getElementById(n.target)}return n.target},setState:function(p,q,r){var n="",o;if(k){sessionStorage.setItem(p,q)}else{if(r){o=new Date();o.setTime(o.getTime()+(r*24*60*60*1000));n="; expires="+o.toGMTString()}document.cookie=p+"="+q+n+"; path=/"}},getState:function(o){var q=o+"=",n=document.cookie.split(";"),p,r;if(k){return sessionStorage.getItem(o)}else{for(p=0;p<n.length;p++){r=n[p];while(r.charAt(0)===" "){r=r.substring(1,r.length)}if(r.indexOf(q)===0){return r.substring(q.length,r.length)}}return null}},clearState:function(n){if(k){sessionStorage.removeItem(n)}else{this.setState(n,"",-1)}}};g={next:[],prev:[],start:[],end:[],error:[],close:[]};j={stepNums:null,nextBtn:"Next",prevBtn:"Back",doneBtn:"Done",skipBtn:"Skip",closeTooltip:"Close"};e=function(s){var o=false,n,r=function(v,u){var t=document.createElement("input");t.id=v;t.type="button";t.value=u;i.addClass(t,"hopscotch-nav-button");if(v.indexOf("prev")>=0){i.addClass(t,"prev")}else{i.addClass(t,"next")}return t},p=function(u,t,w){var v="hide";if(w){v="hide-all"}if(typeof t===h){t=true}if(t){i.removeClass(u,v)}else{i.addClass(u,v)}},q=function(B,w,I){var E,t,C,v,z,A,D,x,y=6,H=i.getStepTarget(w),u=B.element,G=B.arrowEl,F=i.getPixelValue(w.arrowOffset);I=i.valOrDefault(I,true);E=i.getPixelValue(w.width)||s.bubbleWidth;C=i.valOrDefault(w.padding,s.bubblePadding);i.removeClass(u,"bounce-down bounce-up bounce-left bounce-right");v=H.getBoundingClientRect();if(w.orientation==="top"){t=u.offsetHeight;D=(v.top-t)-s.arrowWidth;x=v.left;A="bounce-down"}else{if(w.orientation==="bottom"){D=v.bottom+s.arrowWidth;x=v.left;A="bounce-up"}else{if(w.orientation==="left"){D=v.top;x=v.left-E-2*C-2*y-s.arrowWidth;A="bounce-right"}else{if(w.orientation==="right"){D=v.top;x=v.right+s.arrowWidth;A="bounce-left"}}}}if(!F){G.style.top="";G.style.left=""}else{if(w.orientation==="top"||w.orientation==="bottom"){G.style.top="";G.style.left=F+"px"}else{if(w.orientation==="left"||w.orientation==="right"){G.style.left="";G.style.top=F+"px"}}}x+=i.getPixelValue(w.xOffset);D+=i.getPixelValue(w.yOffset);D+=i.getScrollTop();x+=i.getScrollLeft();if(s.animate){u.style.top=D+"px";u.style.left=x+"px"}else{u.style.top=D+"px";u.style.left=x+"px";if(I){z=s.smoothScroll?s.scrollDuration:0;setTimeout(function(){i.addClass(u,A)},z);setTimeout(function(){i.removeClass(u,A)},z+2000)}}};this.init=function(){var x=document.createElement("div"),y=document.createElement("div"),w=document.createElement("div"),v=this,z=false,u,t;this.element=x;this.containerEl=y;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");x.id="hopscotch-bubble";i.addClass(x,"animated");y.id="hopscotch-bubble-container";this.numberEl.id="hopscotch-bubble-number";y.appendChild(this.numberEl);w.appendChild(this.titleEl);w.appendChild(this.contentEl);w.id="hopscotch-bubble-content";y.appendChild(w);x.appendChild(y);this.initNavButtons();this.initCloseButton();this.initArrow();u=function(){if(z||!o){return}z=true;t=setTimeout(function(){q(v,n,false);z=false},200)};if(window.addEventListener){window.addEventListener("resize",u)}else{if(window.attachEvent){window.attachEvent("onresize",u)}}this.hide();document.body.appendChild(x);return this};this.initNavButtons=function(){var t=document.createElement("div");this.prevBtnEl=r("hopscotch-prev",j.prevBtn);this.nextBtnEl=r("hopscotch-next",j.nextBtn);this.doneBtnEl=r("hopscotch-done",j.doneBtn);i.addClass(this.doneBtnEl,"hide");t.appendChild(this.prevBtnEl);t.appendChild(this.nextBtnEl);t.appendChild(this.doneBtnEl);i.addClickListener(this.prevBtnEl,function(u){l.prevStep()});i.addClickListener(this.nextBtnEl,function(u){l.nextStep()});i.addClickListener(this.doneBtnEl,l.endTour);t.id="hopscotch-actions";this.buttonsEl=t;this.containerEl.appendChild(t);return this};this.initCloseButton=function(){var t=document.createElement("a");t.id="hopscotch-bubble-close";t.href="#";t.title=j.closeTooltip;t.innerHTML=j.closeTooltip;i.addClickListener(t,function(v){var u=l.getCurrStepNum(),w=l.getCurrTour(),x=(u===w.steps.length-1);i.invokeCallbacks("close",[w.id,u]);l.endTour(true,x);if(v.preventDefault){v.preventDefault()}else{if(event){event.returnValue=false}}});this.closeBtnEl=t;this.containerEl.appendChild(t);return this};this.initArrow=function(){var t,u;this.arrowEl=document.createElement("div");this.arrowEl.id="hopscotch-bubble-arrow-container";u=document.createElement("div");u.className="hopscotch-bubble-arrow-border";t=document.createElement("div");t.className="hopscotch-bubble-arrow";this.arrowEl.appendChild(u);this.arrowEl.appendChild(t);this.element.appendChild(this.arrowEl);return this};this.renderStep=function(v,A,w,x,B){var C=this,u=i.valOrDefault(v.showNextButton,s.showNextButton),t=i.valOrDefault(v.showPrevButton,s.showPrevButton),z,y;n=v;this.setTitle(v.title?v.title:"");this.setContent(v.content?v.content:"");this.setNum(A);this.showPrevButton(this.prevBtnEl&&t&&(A>0||w>0));this.showNextButton(this.nextBtnEl&&u&&!x);this.nextBtnEl.value=v.showSkip?j.skipBtn:j.nextBtn;if(x){i.removeClass(this.doneBtnEl,"hide")}else{i.addClass(this.doneBtnEl,"hide")}this.setArrow(v.orientation);z=i.getPixelValue(v.width)||s.bubbleWidth;y=i.valOrDefault(v.padding,s.bubblePadding);this.containerEl.style.width=z+"px";this.containerEl.style.padding=y+"px";if(v.orientation==="top"){setTimeout(function(){q(C,v);if(B){B()}},5)}else{q(this,v);if(B){B()}}return this};this.setTitle=function(t){if(t){this.titleEl.innerHTML=t;i.removeClass(this.titleEl,"hide")}else{i.addClass(this.titleEl,"hide")}return this};this.setContent=function(t){if(t){this.contentEl.innerHTML=t;i.removeClass(this.contentEl,"hide")}else{i.addClass(this.contentEl,"hide")}return this};this.setNum=function(t){if(j.stepNums&&t<j.stepNums.length){t=j.stepNums[t]}else{t=t+1}this.numberEl.innerHTML=t};this.setArrow=function(t){if(t==="top"){this.arrowEl.className="down"}else{if(t==="bottom"){this.arrowEl.className="up"}else{if(t==="left"){this.arrowEl.className="right"}else{if(t==="right"){this.arrowEl.className="left"}}}}};this.show=function(){var t=this;if(s.animate){setTimeout(function(){i.addClass(t.element,"animate")},50)}i.removeClass(this.element,"hide");o=true;return this};this.hide=function(){i.addClass(this.element,"hide");i.removeClass(this.element,"animate");o=false;return this};this.showPrevButton=function(t,u){p(this.prevBtnEl,t,u)};this.showNextButton=function(t,u){p(this.nextBtnEl,t,u)};this.showCloseButton=function(t,u){p(this.closeBtnEl,t,u)};this.initAnimate=function(){var t=this;setTimeout(function(){i.addClass(t.element,"animate")},50)};this.removeAnimate=function(){i.removeClass(this.element,"animate")};this.init()};m=function(o){var y,q,u,p,z,C,t,v,r,s=function(){if(!y){y=new e(q)}return y},B=function(){var E=u.steps[p];return(E.length>0)?E[z]:E},n=function(){return u.steps[p].length>0},A=function(){var E=u.steps[p].length;if(z<E-1){++z;return true}else{if(p<u.steps.length-1){++p;z=n()?0:undefined;return true}}return false},x=function(){var E;if(z>0){--z;return true}else{if(p>0){E=u.steps[--p].length;if(E){z=E-1}else{z=undefined}return true}}return false},w=function(){var U=s().element,Q=i.getPixelValue(U.style.top),P=Q+i.getPixelValue(U.offsetHeight),N=i.getStepTarget(B()),V=N.getBoundingClientRect(),S=V.top+i.getScrollTop(),O=V.bottom+i.getScrollTop(),L=(Q<S)?Q:S,E=(P>O)?P:O,R=i.getScrollTop(),G=R+i.getWindowHeight(),H=L-q.scrollTopMargin,F,K,J,T,I,M;if(typeof YAHOO!==h&&typeof YAHOO.env!==h&&typeof YAHOO.env.ua!==h&&typeof YAHOO.util!==h&&typeof YAHOO.util.Scroll!==h){F=YAHOO.env.ua.webkit?document.body:document.documentElement;J=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:undefined;K=new YAHOO.util.Scroll(F,{scroll:{to:[0,H]}},q.scrollDuration/1000,J);K.animate();return}if(H<0){H=0}if(L>=R&&L<=R+q.scrollTopMargin){return}if(L<R||E>G){if(q.smoothScroll){T=(R>L)?-1:1;I=Math.abs(R-H)/(q.scrollDuration/10);M=setInterval(function(){var X=i.getScrollTop(),W=X+(T*I);if((T>0&&W>=H)||T<0&&W<=H){W=H;clearInterval(M)}window.scrollTo(0,W);if(i.getScrollTop()===X){clearInterval(M)}},10)}else{window.scrollTo(0,H)}}},D=function(){if(o){this.configure(o)}};this.loadTour=function(J){var H={},F,K,G,E,I;u=J;for(K in J){if(J.hasOwnProperty(K)&&K!=="id"&&K!=="steps"){H[K]=J[K]}}this.resetDefaultOptions();r.call(this,H,true);E=i.getState(q.cookieName);if(E){I=E.split(":");C=I[0];t=I[1];v=undefined;G=t.split("-");if(G.length>1){t=parseInt(G[0],10);v=parseInt(G[1],10)}else{t=parseInt(t,10)}if(I.length>2&&I[2]==="mp"){if(v&&v<u.steps[t].length-1){++v}else{if(t<u.steps.length-1){++t;if(u.steps[t].length>0){v=0}else{v=undefined}}}}}F=s();F.showPrevButton(q.showPrevButton,true);F.showNextButton(q.showNextButton,true);return this};this.startTour=function(H,G){var E,F;if(!u){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){b=true;return this}if(typeof H!==h){p=H;z=G}else{if(u.id===C&&typeof t!==h){p=t;z=v;F=B();if(!i.getStepTarget(F)){x();F=B();if(!i.getStepTarget(F)){this.endTour(false,false);return this}}}else{p=0}}if(!z&&n()){z=0}i.invokeCallbacks("start",[u.id,p]);this.isActive=true;if(q.animate){E.initAnimate()}if(!i.getStepTarget(B())){i.invokeCallbacks("error",[u.id,p]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(p,z)}return this};this.showStep=function(I,G){var L=u.steps,J=L[I],H=L.length,F=u.id+":"+I,E=s(),K;p=I;z=G;if(typeof G!==h&&n()){J=J[G];F+="-"+G}K=(I===H-1)||(G>=J.length-1);E.renderStep(J,I,G,K,w);if(J.multipage){F+=":mp"}i.setState(q.cookieName,F,1);s().show();return this};this.prevStep=function(){var F=B(),E=false;if(F.onPrev){F.onPrev()}i.invokeCallbacks("prev",[u.id,p]);if(q.skipIfNoElement){while(!E&&x()){F=B();E=i.getStepTarget(F);if(!E){i.invokeCallbacks("error",[u.id,p])}}if(!E){return this.endTour(true,false)}}else{if(x()){F=B();if(!i.getStepTarget(F)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}this.showStep(p,z);return this};this.nextStep=function(H){var G=B(),F=p,E=false;H=i.valOrDefault(H,true);if(q.skipIfNoElement){while(!E&&A()){G=B();E=i.getStepTarget(G);if(!E){i.invokeCallbacks("error",[u.id,p])}}if(!E){return this.endTour(true,false)}}else{if(A()){G=B();if(!i.getStepTarget(G)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}if(H){if(G.onNext){G.onNext()}i.invokeCallbacks("next",[u.id,F])}this.showStep(p,z);return this};this.endTour=function(G,F){var E=s();G=i.valOrDefault(G,true);F=i.valOrDefault(F,true);p=0;z=undefined;t=undefined;E.hide();if(G){i.clearState(q.cookieName)}l.isActive=false;if(F){i.invokeCallbacks("end",[u.id])}l.removeCallbacks(true);return this};this.getCurrTour=function(){return u};this.getCurrStepNum=function(){return p};this.getCurrSubstepNum=function(){return z};this.addCallback=function(G,E,F){if(E){g[G].push({cb:E,fromTour:F})}return this};this.removeCallbacks=function(F){var I,G,E,H;for(H in g){if(F){I=g[H];for(G=0,E=I.length;G<E;++G){if(I[G].fromTour){I.splice(G--,1);--E}}}else{g[H]=[]}}return this};this.resetDefaultOptions=function(){q={animate:false,smoothScroll:true,scrollDuration:1000,scrollTopMargin:200,showCloseButton:true,showPrevButton:false,showNextButton:true,bubbleWidth:280,bubblePadding:15,arrowWidth:20,skipIfNoElement:true,cookieName:"hopscotch.tour.state"}};r=function(F,G){var E;if(!q){this.resetDefaultOptions()}i.extend(q,F);if(F){i.extend(j,F.i18n)}this.addCallback("next",F.onNext,G).addCallback("prev",F.onPrev,G).addCallback("start",F.onStart,G).addCallback("end",F.onEnd,G).addCallback("error",F.onError,G).addCallback("close",F.onClose,G);E=s();if(q.animate){E.initAnimate()}else{E.removeAnimate()}E.showPrevButton(q.showPrevButton,true);E.showNextButton(q.showNextButton,true);E.showCloseButton(q.showCloseButton,true);return this};this.configure=function(E){return r.call(this,E,false)};D.call(this,o)};l=new m();c[d]=l}(window,"hopscotch"));
\ No newline at end of file
+(function(c,d){var m,e,j,i,g,a,l=c[d],h="undefined",b=false,k=(typeof window.sessionStorage!==h),f=document.body.style;if(l){return}a=function(){if(b){l.startTour()}};if(window.addEventListener){window.addEventListener("load",a)}else{if(window.attachEvent){window.attachEvent("onload",a)}}i={addClass:function(p,r){var o,q,n;if(p.className.length===0){p.className=r}else{o=p.className.split(" ");for(q=0,n=o.length;q<n;++q){if(o[q]===r){return}}o.splice(0,0,r);p.className=o.join(" ")}},removeClass:function(n,s){var r,v,t,q,o,u,p;v=s.split(" ");r=n.className.split(" ");for(q=0,u=v.length;q<u;++q){t=v[q];for(o=0,p=r.length;o<p;++o){if(r[o]===t){break}}if(o<p){r.splice(o,1)}}n.className=r.join(" ")},getPixelValue:function(o){var n=typeof o;if(n==="number"){return o}if(n==="string"){return parseInt(o,10)}return 0},valOrDefault:function(o,n){return typeof o!==h?o:n},invokeCallbacks:function(r,o){var q=g[r],p=0,n=q.length;for(;p<n;++p){q[p].cb.apply(this,o)}},getScrollTop:function(){if(typeof window.pageYOffset!==h){return window.pageYOffset}else{return document.documentElement.scrollTop}},getScrollLeft:function(){if(typeof window.pageXOffset!==h){return window.pageXOffset}else{return document.documentElement.scrollLeft}},getWindowHeight:function(){return window.innerHeight?window.innerHeight:document.documentElement.clientHeight},getWindowWidth:function(){return window.innerWidth?window.innerWidth:document.documentElement.clientWidth},addClickListener:function(o,n){return o.addEventListener?o.addEventListener("click",n):o.attachEvent("onclick",n)},evtPreventDefault:function(n){if(n.preventDefault){n.preventDefault()}else{if(event){event.returnValue=false}}},extend:function(o,n){var p;for(p in n){if(n.hasOwnProperty(p)){o[p]=n[p]}}},getStepTarget:function(n){if(typeof n.target==="string"){return document.getElementById(n.target)}return n.target},setState:function(p,q,r){var n="",o;if(k){sessionStorage.setItem(p,q)}else{if(r){o=new Date();o.setTime(o.getTime()+(r*24*60*60*1000));n="; expires="+o.toGMTString()}document.cookie=p+"="+q+n+"; path=/"}},getState:function(o){var q=o+"=",n=document.cookie.split(";"),p,r;if(k){return sessionStorage.getItem(o)}else{for(p=0;p<n.length;p++){r=n[p];while(r.charAt(0)===" "){r=r.substring(1,r.length)}if(r.indexOf(q)===0){return r.substring(q.length,r.length)}}return null}},clearState:function(n){if(k){sessionStorage.removeItem(n)}else{this.setState(n,"",-1)}}};g={next:[],prev:[],start:[],end:[],error:[],close:[]};j={stepNums:null,nextBtn:"Next",prevBtn:"Back",doneBtn:"Done",skipBtn:"Skip",closeTooltip:"Close"};e=function(s){var o=false,n,r=function(v,u){var t=document.createElement("input");t.id=v;t.type="button";t.value=u;i.addClass(t,"hopscotch-nav-button");if(v.indexOf("prev")>=0){i.addClass(t,"prev")}else{i.addClass(t,"next")}return t},p=function(u,t,w){var v="hide";if(w){v="hide-all"}if(typeof t===h){t=true}if(t){i.removeClass(u,v)}else{i.addClass(u,v)}},q=function(B,w,I){var E,t,C,v,z,A,D,x,y=6,H=i.getStepTarget(w),u=B.element,G=B.arrowEl,F=i.getPixelValue(w.arrowOffset);I=i.valOrDefault(I,true);E=i.getPixelValue(w.width)||s.bubbleWidth;C=i.valOrDefault(w.padding,s.bubblePadding);i.removeClass(u,"bounce-down bounce-up bounce-left bounce-right");v=H.getBoundingClientRect();if(w.orientation==="top"){t=u.offsetHeight;D=(v.top-t)-s.arrowWidth;x=v.left;A="bounce-down"}else{if(w.orientation==="bottom"){D=v.bottom+s.arrowWidth;x=v.left;A="bounce-up"}else{if(w.orientation==="left"){D=v.top;x=v.left-E-2*C-2*y-s.arrowWidth;A="bounce-right"}else{if(w.orientation==="right"){D=v.top;x=v.right+s.arrowWidth;A="bounce-left"}}}}if(!F){G.style.top="";G.style.left=""}else{if(w.orientation==="top"||w.orientation==="bottom"){G.style.top="";G.style.left=F+"px"}else{if(w.orientation==="left"||w.orientation==="right"){G.style.left="";G.style.top=F+"px"}}}x+=i.getPixelValue(w.xOffset);D+=i.getPixelValue(w.yOffset);if(!w.fixedElement){D+=i.getScrollTop();x+=i.getScrollLeft()}u.style.position=(w.fixedElement?"fixed":"absolute");u.style.top=D+"px";u.style.left=x+"px";if(!s.animate&&I){z=s.smoothScroll?s.scrollDuration:0;setTimeout(function(){i.addClass(u,A)},z);setTimeout(function(){i.removeClass(u,A)},z+2000)}};this.init=function(){var x=document.createElement("div"),y=document.createElement("div"),w=document.createElement("div"),v=this,z=false,u,t;this.element=x;this.containerEl=y;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");x.id="hopscotch-bubble";i.addClass(x,"animated");y.id="hopscotch-bubble-container";this.numberEl.id="hopscotch-bubble-number";y.appendChild(this.numberEl);w.appendChild(this.titleEl);w.appendChild(this.contentEl);w.id="hopscotch-bubble-content";y.appendChild(w);x.appendChild(y);this.initNavButtons();this.initCloseButton();this.initArrow();u=function(){if(z||!o){return}z=true;t=setTimeout(function(){q(v,n,false);z=false},200)};if(window.addEventListener){window.addEventListener("resize",u)}else{if(window.attachEvent){window.attachEvent("onresize",u)}}this.hide();document.body.appendChild(x);return this};this.initNavButtons=function(){var t=document.createElement("div");this.prevBtnEl=r("hopscotch-prev",j.prevBtn);this.nextBtnEl=r("hopscotch-next",j.nextBtn);this.doneBtnEl=r("hopscotch-done",j.doneBtn);i.addClass(this.doneBtnEl,"hide");t.appendChild(this.prevBtnEl);t.appendChild(this.nextBtnEl);t.appendChild(this.doneBtnEl);i.addClickListener(this.prevBtnEl,function(u){l.prevStep()});i.addClickListener(this.nextBtnEl,function(u){l.nextStep()});i.addClickListener(this.doneBtnEl,l.endTour);t.id="hopscotch-actions";this.buttonsEl=t;this.containerEl.appendChild(t);return this};this.initCloseButton=function(){var t=document.createElement("a");t.id="hopscotch-bubble-close";t.href="#";t.title=j.closeTooltip;t.innerHTML=j.closeTooltip;i.addClickListener(t,function(v){var u=l.getCurrStepNum(),w=l.getCurrTour(),x=(u===w.steps.length-1);i.invokeCallbacks("close",[w.id,u]);l.endTour(true,x);if(v.preventDefault){v.preventDefault()}else{if(event){event.returnValue=false}}});this.closeBtnEl=t;this.containerEl.appendChild(t);return this};this.initArrow=function(){var t,u;this.arrowEl=document.createElement("div");this.arrowEl.id="hopscotch-bubble-arrow-container";u=document.createElement("div");u.className="hopscotch-bubble-arrow-border";t=document.createElement("div");t.className="hopscotch-bubble-arrow";this.arrowEl.appendChild(u);this.arrowEl.appendChild(t);this.element.appendChild(this.arrowEl);return this};this.renderStep=function(v,A,w,x,B){var C=this,u=i.valOrDefault(v.showNextButton,s.showNextButton),t=i.valOrDefault(v.showPrevButton,s.showPrevButton),z,y;n=v;this.setTitle(v.title?v.title:"");this.setContent(v.content?v.content:"");this.setNum(A);this.showPrevButton(this.prevBtnEl&&t&&(A>0||w>0));this.showNextButton(this.nextBtnEl&&u&&!x);this.nextBtnEl.value=v.showSkip?j.skipBtn:j.nextBtn;if(x){i.removeClass(this.doneBtnEl,"hide")}else{i.addClass(this.doneBtnEl,"hide")}this.setArrow(v.orientation);z=i.getPixelValue(v.width)||s.bubbleWidth;y=i.valOrDefault(v.padding,s.bubblePadding);this.containerEl.style.width=z+"px";this.containerEl.style.padding=y+"px";if(v.orientation==="top"){setTimeout(function(){q(C,v);if(B&&!v.fixedElement){B()}},5)}else{q(this,v);if(B&&!v.fixedElement){B()}}return this};this.setTitle=function(t){if(t){this.titleEl.innerHTML=t;i.removeClass(this.titleEl,"hide")}else{i.addClass(this.titleEl,"hide")}return this};this.setContent=function(t){if(t){this.contentEl.innerHTML=t;i.removeClass(this.contentEl,"hide")}else{i.addClass(this.contentEl,"hide")}return this};this.setNum=function(t){if(j.stepNums&&t<j.stepNums.length){t=j.stepNums[t]}else{t=t+1}this.numberEl.innerHTML=t};this.setArrow=function(t){if(t==="top"){this.arrowEl.className="down"}else{if(t==="bottom"){this.arrowEl.className="up"}else{if(t==="left"){this.arrowEl.className="right"}else{if(t==="right"){this.arrowEl.className="left"}}}}};this.show=function(){var t=this;if(s.animate){setTimeout(function(){i.addClass(t.element,"animate")},50)}i.removeClass(this.element,"hide");o=true;return this};this.hide=function(){i.addClass(this.element,"hide");i.removeClass(this.element,"animate");o=false;return this};this.showPrevButton=function(t,u){p(this.prevBtnEl,t,u)};this.showNextButton=function(t,u){p(this.nextBtnEl,t,u)};this.showCloseButton=function(t,u){p(this.closeBtnEl,t,u)};this.initAnimate=function(){var t=this;setTimeout(function(){i.addClass(t.element,"animate")},50)};this.removeAnimate=function(){i.removeClass(this.element,"animate")};this.init()};m=function(o){var y,q,u,p,z,C,t,v,r,s=function(){if(!y){y=new e(q)}return y},B=function(){var E=u.steps[p];return(E.length>0)?E[z]:E},n=function(){return u.steps[p].length>0},A=function(){var E=u.steps[p].length;if(z<E-1){++z;return true}else{if(p<u.steps.length-1){++p;z=n()?0:undefined;return true}}return false},x=function(){var E;if(z>0){--z;return true}else{if(p>0){E=u.steps[--p].length;if(E){z=E-1}else{z=undefined}return true}}return false},w=function(){var U=s().element,Q=i.getPixelValue(U.style.top),P=Q+i.getPixelValue(U.offsetHeight),N=i.getStepTarget(B()),V=N.getBoundingClientRect(),S=V.top+i.getScrollTop(),O=V.bottom+i.getScrollTop(),L=(Q<S)?Q:S,E=(P>O)?P:O,R=i.getScrollTop(),G=R+i.getWindowHeight(),H=L-q.scrollTopMargin,F,K,J,T,I,M;if(typeof YAHOO!==h&&typeof YAHOO.env!==h&&typeof YAHOO.env.ua!==h&&typeof YAHOO.util!==h&&typeof YAHOO.util.Scroll!==h){F=YAHOO.env.ua.webkit?document.body:document.documentElement;J=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:undefined;K=new YAHOO.util.Scroll(F,{scroll:{to:[0,H]}},q.scrollDuration/1000,J);K.animate();return}if(H<0){H=0}if(L>=R&&L<=R+q.scrollTopMargin){return}if(L<R||E>G){if(q.smoothScroll){T=(R>L)?-1:1;I=Math.abs(R-H)/(q.scrollDuration/10);M=setInterval(function(){var X=i.getScrollTop(),W=X+(T*I);if((T>0&&W>=H)||T<0&&W<=H){W=H;clearInterval(M)}window.scrollTo(0,W);if(i.getScrollTop()===X){clearInterval(M)}},10)}else{window.scrollTo(0,H)}}},D=function(){if(o){this.configure(o)}};this.loadTour=function(J){var H={},F,K,G,E,I;u=J;for(K in J){if(J.hasOwnProperty(K)&&K!=="id"&&K!=="steps"){H[K]=J[K]}}this.resetDefaultOptions();r.call(this,H,true);E=i.getState(q.cookieName);if(E){I=E.split(":");C=I[0];t=I[1];v=undefined;G=t.split("-");if(G.length>1){t=parseInt(G[0],10);v=parseInt(G[1],10)}else{t=parseInt(t,10)}if(I.length>2&&I[2]==="mp"){if(v&&v<u.steps[t].length-1){++v}else{if(t<u.steps.length-1){++t;if(u.steps[t].length>0){v=0}else{v=undefined}}}}}F=s();F.showPrevButton(q.showPrevButton,true);F.showNextButton(q.showNextButton,true);return this};this.startTour=function(H,G){var E,F;if(!u){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){b=true;return this}if(typeof H!==h){p=H;z=G}else{if(u.id===C&&typeof t!==h){p=t;z=v;F=B();if(!i.getStepTarget(F)){x();F=B();if(!i.getStepTarget(F)){this.endTour(false,false);return this}}}else{p=0}}if(!z&&n()){z=0}i.invokeCallbacks("start",[u.id,p]);this.isActive=true;if(q.animate){E.initAnimate()}if(!i.getStepTarget(B())){i.invokeCallbacks("error",[u.id,p]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(p,z)}return this};this.showStep=function(I,G){var L=u.steps,J=L[I],H=L.length,F=u.id+":"+I,E=s(),K;p=I;z=G;if(typeof G!==h&&n()){J=J[G];F+="-"+G}K=(I===H-1)||(G>=J.length-1);E.renderStep(J,I,G,K,w);if(J.multipage){F+=":mp"}i.setState(q.cookieName,F,1);s().show();return this};this.prevStep=function(){var F=B(),E=false;if(F.onPrev){F.onPrev()}i.invokeCallbacks("prev",[u.id,p]);if(q.skipIfNoElement){while(!E&&x()){F=B();E=i.getStepTarget(F);if(!E){i.invokeCallbacks("error",[u.id,p])}}if(!E){return this.endTour(true,false)}}else{if(x()){F=B();if(!i.getStepTarget(F)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}this.showStep(p,z);return this};this.nextStep=function(H){var G=B(),F=p,E=false;H=i.valOrDefault(H,true);if(q.skipIfNoElement){while(!E&&A()){G=B();E=i.getStepTarget(G);if(!E){i.invokeCallbacks("error",[u.id,p])}}if(!E){return this.endTour(true,false)}}else{if(A()){G=B();if(!i.getStepTarget(G)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}if(H){if(G.onNext){G.onNext()}i.invokeCallbacks("next",[u.id,F])}this.showStep(p,z);return this};this.endTour=function(G,F){var E=s();G=i.valOrDefault(G,true);F=i.valOrDefault(F,true);p=0;z=undefined;t=undefined;E.hide();if(G){i.clearState(q.cookieName)}l.isActive=false;if(F){i.invokeCallbacks("end",[u.id])}l.removeCallbacks(true);return this};this.getCurrTour=function(){return u};this.getCurrStepNum=function(){return p};this.getCurrSubstepNum=function(){return z};this.addCallback=function(G,E,F){if(E){g[G].push({cb:E,fromTour:F})}return this};this.removeCallbacks=function(F){var I,G,E,H;for(H in g){if(F){I=g[H];for(G=0,E=I.length;G<E;++G){if(I[G].fromTour){I.splice(G--,1);--E}}}else{g[H]=[]}}return this};this.resetDefaultOptions=function(){q={animate:false,smoothScroll:true,scrollDuration:1000,scrollTopMargin:200,showCloseButton:true,showPrevButton:false,showNextButton:true,bubbleWidth:280,bubblePadding:15,arrowWidth:20,skipIfNoElement:true,cookieName:"hopscotch.tour.state"}};r=function(F,G){var E;if(!q){this.resetDefaultOptions()}i.extend(q,F);if(F){i.extend(j,F.i18n)}this.addCallback("next",F.onNext,G).addCallback("prev",F.onPrev,G).addCallback("start",F.onStart,G).addCallback("end",F.onEnd,G).addCallback("error",F.onError,G).addCallback("close",F.onClose,G);E=s();if(q.animate){E.initAnimate()}else{E.removeAnimate()}E.showPrevButton(q.showPrevButton,true);E.showNextButton(q.showNextButton,true);E.showCloseButton(q.showCloseButton,true);return this};this.configure=function(E){return r.call(this,E,false)};D.call(this,o)};l=new m();c[d]=l}(window,"hopscotch"));
\ No newline at end of file
diff --git a/js/hopscotch.js b/js/hopscotch.js
index 900a8d9e..54a62956 100644
--- a/js/hopscotch.js
+++ b/js/hopscotch.js
@@ -375,29 +375,28 @@
       top += utils.getPixelValue(step.yOffset);
 
       // ADJUST TOP FOR SCROLL POSITION
-      top += utils.getScrollTop();
-      left += utils.getScrollLeft();
-
-      if (opt.animate) {
-        el.style.top = top + 'px';
-        el.style.left = left + 'px';
+      if (!step.fixedElement) {
+        top += utils.getScrollTop();
+        left += utils.getScrollLeft();
       }
-      else {
-        el.style.top = top + 'px';
-        el.style.left = left + 'px';
 
+      // ACCOUNT FOR FIXED POSITION ELEMENTS
+      el.style.position = (step.fixedElement ? 'fixed' : 'absolute');
+
+      el.style.top = top + 'px';
+      el.style.left = left + 'px';
+
+      if (!opt.animate && bounce) {
         // Do the bouncing effect
-        if (bounce) {
-          bounceDelay = opt.smoothScroll ? opt.scrollDuration : 0;
-
-          setTimeout(function() {
-            utils.addClass(el, bounceDirection);
-          }, bounceDelay);
-          // Then remove it
-          setTimeout(function() {
-            utils.removeClass(el, bounceDirection);
-          }, bounceDelay + 2000); // bounce lasts 2 seconds
-        }
+        bounceDelay = opt.smoothScroll ? opt.scrollDuration : 0;
+
+        setTimeout(function() {
+          utils.addClass(el, bounceDirection);
+        }, bounceDelay);
+        // Then remove it
+        setTimeout(function() {
+          utils.removeClass(el, bounceDirection);
+        }, bounceDelay + 2000); // bounce lasts 2 seconds
       }
     };
 
@@ -574,13 +573,15 @@
         // Timeout to get correct height of bubble for positioning.
         setTimeout(function() {
           setPosition(self, step);
-          if (callback) { callback(); }
+          // only want to adjust window scroll for non-fixed elements
+          if (callback && !step.fixedElement) { callback(); }
         }, 5);
       }
       else {
         // Don't care about height for the other orientations.
         setPosition(this, step);
-        if (callback) { callback(); }
+        // only want to adjust window scroll for non-fixed elements
+        if (callback && !step.fixedElement) { callback(); }
       }
 
       return this;
diff --git a/js/hopscotch_jquery-min.js b/js/hopscotch_jquery-min.js
index 0bfa4c0f..f1202528 100644
--- a/js/hopscotch_jquery-min.js
+++ b/js/hopscotch_jquery-min.js
@@ -1 +1 @@
-(function(b,c){var m,e,j,i,g,h="undefined",l=b[c],a=false,k=(typeof window.sessionStorage!==h),f=document.body.style,d=(typeof f.MozTransition!==h||typeof f.MsTransition!==h||typeof f.webkitTransition!==h||typeof f.OTransition!==h||typeof f.transition!==h);if(l){return}$(window).load(function(){if(a){l.startTour()}});i={getPixelValue:function(o){var n=typeof o;if(n==="number"){return o}if(n==="string"){return parseInt(o,10)}return 0},valOrDefault:function(o,n){return typeof o!==h?o:n},invokeCallbacks:function(r,o){var q=g[r],p=0,n=q.length;for(;p<n;++p){q[p].cb.apply(this,o)}},getScrollTop:function(){if(typeof window.pageYOffset!==h){return window.pageYOffset}else{return document.documentElement.scrollTop}},getScrollLeft:function(){if(typeof window.pageXOffset!==h){return window.pageXOffset}else{return document.documentElement.scrollLeft}},extend:function(o,n){var p;for(p in n){if(n.hasOwnProperty(p)){o[p]=n[p]}}},getStepTarget:function(n){if(typeof n.target==="string"){return $("#"+n.target)}return $(n.target)},setState:function(p,q,r){var n="",o;if(k){sessionStorage.setItem(p,q)}else{if(r){o=new Date();o.setTime(o.getTime()+(r*24*60*60*1000));n="; expires="+o.toGMTString()}document.cookie=p+"="+q+n+"; path=/"}},getState:function(o){var q=o+"=",n=document.cookie.split(";"),p,r;if(k){return sessionStorage.getItem(o)}else{for(p=0;p<n.length;p++){r=n[p];while(r.charAt(0)===" "){r=r.substring(1,r.length)}if(r.indexOf(q)===0){return r.substring(q.length,r.length)}}return null}},clearState:function(n){if(k){sessionStorage.removeItem(n)}else{this.setState(n,"",-1)}}};g={next:[],prev:[],start:[],end:[],error:[],close:[]};j={stepNums:null,nextBtn:"Next",prevBtn:"Back",doneBtn:"Done",skipBtn:"Skip",closeTooltip:"Close"};e=function(s){var o=false,n,r=function(v,u){var t=$("<input>");t.attr({id:v,type:"button",value:u});t.addClass("hopscotch-nav-button");if(v.indexOf("prev")>=0){t.addClass("prev")}else{t.addClass("next")}return t},p=function(u,t,w){var v=w?"hide-all":"hide";if(typeof t===h){t=true}if(t){u.removeClass(v)}else{u.addClass(v)}},q=function(B,v,I){var E,t,C,u,z,A,D,w,y=6,G=i.getStepTarget(v)[0],H=B.$element,x=B.$arrowEl,F=i.getPixelValue(v.arrowOffset);I=i.valOrDefault(I,true);E=i.getPixelValue(v.width)||s.bubbleWidth;C=i.valOrDefault(v.padding,s.bubblePadding);H.removeClass("bounce-down bounce-up bounce-left bounce-right");u=G.getBoundingClientRect();if(v.orientation==="top"){t=H.height();D=(u.top-t)-s.arrowWidth;w=u.left;A="bounce-down"}else{if(v.orientation==="bottom"){D=u.bottom+s.arrowWidth;w=u.left;A="bounce-up"}else{if(v.orientation==="left"){D=u.top;w=u.left-E-2*C-2*y-s.arrowWidth;A="bounce-right"}else{if(v.orientation==="right"){D=u.top;w=u.right+s.arrowWidth;A="bounce-left"}}}}if(!F){x.css({top:"",left:""})}else{if(v.orientation==="top"||v.orientation==="bottom"){x.css({left:F+"px",top:""})}else{if(v.orientation==="left"||v.orientation==="right"){x.css({top:F+"px",left:""})}}}w+=i.getPixelValue(v.xOffset);D+=i.getPixelValue(v.yOffset);D+=i.getScrollTop();w+=i.getScrollLeft();if(s.animate){if(!d&&s.animate){H.animate({top:D+"px",left:w+"px"})}else{H.css("top",D+"px");H.css("left",w+"px")}}else{H.css("top",D+"px");H.css("left",w+"px");if(I){z=s.smoothScroll?s.scrollDuration:0;setTimeout(function(){H.addClass(A)},z);setTimeout(function(){H.removeClass(A)},z+2000)}}};this.init=function(){var w=$("<div>"),u=$("<div>"),x=$("<div>"),v=this,y=false,t;this.$element=w;this.$containerEl=u;this.$titleEl=$("<h3>");this.$numberEl=$("<span>");this.$contentEl=$("<p>");this.$numberEl.attr("id","hopscotch-bubble-number");x.append(this.$titleEl,this.$contentEl).attr("id","hopscotch-bubble-content");u.attr("id","hopscotch-bubble-container").append(this.$numberEl,x);w.attr("id","hopscotch-bubble").addClass("animated").append(u);this.initNavButtons();this.initCloseButton();this.initArrow();$(window).on("resize",function(){if(y||!o){return}y=true;t=setTimeout(function(){q(v,n,false);y=false},200)});this.hide();$("body").append(w);return this};this.initNavButtons=function(){var t=$("<div>");this.$prevBtnEl=r("hopscotch-prev",j.prevBtn);this.$nextBtnEl=r("hopscotch-next",j.nextBtn);this.$doneBtnEl=r("hopscotch-done",j.doneBtn);this.$doneBtnEl.addClass("hide");this.$prevBtnEl.click(function(u){l.prevStep()});this.$nextBtnEl.click(function(u){l.nextStep()});this.$doneBtnEl.click(l.endTour);t.attr("id","hopscotch-actions").append(this.$prevBtnEl,this.$nextBtnEl,this.$doneBtnEl);this.buttonsEl=t;this.$containerEl.append(t);return this};this.initCloseButton=function(){var t=$("<a>");t.text(j.closeTooltip).attr({id:"hopscotch-bubble-close",href:"#",title:j.closeTooltip}).click(function(v){var u=l.getCurrStepNum(),w=l.getCurrTour(),x=(u===w.steps.length-1);i.invokeCallbacks("close",[w.id,u]);l.endTour(true,x);if(v.preventDefault){v.preventDefault()}else{if(event){event.returnValue=false}}});this.closeBtnEl=t;this.$containerEl.append(t);return this};this.initArrow=function(){var u,t;this.$arrowEl=$("<div>").attr("id","hopscotch-bubble-arrow-container");t=$("<div>").addClass("hopscotch-bubble-arrow-border");u=$("<div>").addClass("hopscotch-bubble-arrow");this.$arrowEl.append(t,u);this.$element.append(this.$arrowEl);return this};this.renderStep=function(v,A,w,x,B){var C=this,u=i.valOrDefault(v.showNextButton,s.showNextButton),t=i.valOrDefault(v.showPrevButton,s.showPrevButton),z,y;n=v;this.setTitle(v.title?v.title:"");this.setContent(v.content?v.content:"");this.setNum(A);this.showPrevButton(this.$prevBtnEl&&t&&(A>0||w>0));this.showNextButton(this.$nextBtnEl&&u&&!x);this.$nextBtnEl.val(v.showSkip?j.skipBtn:j.nextBtn);if(x){this.$doneBtnEl.removeClass("hide")}else{this.$doneBtnEl.addClass("hide")}this.setArrow(v.orientation);z=i.getPixelValue(v.width)||s.bubbleWidth;y=i.valOrDefault(v.padding,s.bubblePadding);this.$containerEl.css({width:z+"px",padding:y+"px"});if(v.orientation==="top"){setTimeout(function(){q(C,v);if(B){B()}},5)}else{q(this,v);if(B){B()}}return this};this.setTitle=function(t){if(t){this.$titleEl.html(t).removeClass("hide")}else{this.$titleEl.addClass("hide")}return this};this.setContent=function(t){if(t){this.$contentEl.html(t).removeClass("hide")}else{this.$contentEl.addClass("hide")}return this};this.setNum=function(t){if(j.stepNums&&t<j.stepNums.length){t=j.stepNums[t]}else{t=t+1}this.$numberEl.html(t)};this.setArrow=function(t){if(t==="top"){this.$arrowEl.removeClass().addClass("down")}else{if(t==="bottom"){this.$arrowEl.removeClass().addClass("up")}else{if(t==="left"){this.$arrowEl.removeClass().addClass("right")}else{if(t==="right"){this.$arrowEl.removeClass().addClass("left")}}}}};this.show=function(){var t=this;if(s.animate){setTimeout(function(){t.$element.addClass("animate")},50)}this.$element.removeClass("hide");o=true;return this};this.hide=function(){this.$element.addClass("hide").removeClass("animate");o=false;return this};this.showPrevButton=function(t,u){p(this.$prevBtnEl,t,u)};this.showNextButton=function(t,u){p(this.$nextBtnEl,t,u)};this.showCloseButton=function(t,u){p(this.closeBtnEl,t,u)};this.initAnimate=function(){var t=this;setTimeout(function(){t.$element.addClass("animate")},50)};this.removeAnimate=function(){this.$element.removeClass("animate")};this.init()};m=function(o){var y,q,u,p,z,C,t,v,r,s=function(){if(!y){y=new e(q)}return y},B=function(){var D=u.steps[p];return(D.length>0)?D[z]:D},n=function(){return u.steps[p].length>0},A=function(){var D=u.steps[p].length;if(z<D-1){++z;return true}else{if(p<u.steps.length-1){++p;z=n()?0:undefined;return true}}return false},x=function(){var D;if(z>0){--z;return true}else{if(p>0){D=u.steps[--p].length;if(D){z=D-1}else{z=undefined}return true}}return false},w=function(){var H=s().$element,D=i.getPixelValue(H.css("top")),I=i.getStepTarget(B())[0],G=I.getBoundingClientRect(),J=G.top+i.getScrollTop(),F=(D<J)?D:J,E=F-q.scrollTopMargin;$("body, html").animate({scrollTop:E},q.scrollDuration)};this.init=function(){if(o){this.configure(o)}return this};this.loadTour=function(I){var G={},E,J,D,H,F;u=I;for(J in I){if(I.hasOwnProperty(J)&&J!=="id"&&J!=="steps"){G[J]=I[J]}}this.resetDefaultOptions();r.call(this,G,true);D=i.getState(q.cookieName);if(D){H=D.split(":");C=H[0];t=H[1];v=undefined;F=t.split("-");if(F.length>1){t=parseInt(F[0],10);v=parseInt(F[1],10)}else{t=parseInt(t,10)}if(H.length>2&&H[2]==="mp"){if(v&&v<u.steps[t].length-1){++v}else{if(t<u.steps.length-1){++t;if(u.steps[t].length>0){v=0}else{v=undefined}}}}}E=s();E.showPrevButton(q.showPrevButton,true);E.showNextButton(q.showNextButton,true);return this};this.startTour=function(G,F){var D,E;if(!u){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){a=true;return this}if(typeof G!==h){p=G;z=F}else{if(u.id===C&&typeof t!==h){p=t;z=v;E=B();if(!i.getStepTarget(E)){x();E=B();if(!i.getStepTarget(E)){this.endTour(false,false);return this}}}else{p=0}}if(!z&&n()){z=0}i.invokeCallbacks("start",[u.id,p]);this.isActive=true;if(q.animate){D.initAnimate()}if(!i.getStepTarget(B())){i.invokeCallbacks("error",[u.id,p]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(p,z)}return this};this.showStep=function(H,F){var K=u.steps,I=K[H],G=K.length,E=u.id+":"+H,D=s(),J;p=H;z=F;if(typeof F!==h&&n()){I=I[F];E+="-"+F}J=(H===G-1)||(F>=I.length-1);D.renderStep(I,H,F,J,w);if(I.multipage){E+=":mp"}i.setState(q.cookieName,E,1);s().show();return this};this.prevStep=function(){var E=B(),D=[];if(E.onPrev){E.onPrev()}i.invokeCallbacks("prev",[u.id,p]);if(q.skipIfNoElement){while(D.length===0&&x()){E=B();D=i.getStepTarget(E);if(D.length===0){i.invokeCallbacks("error",[u.id,p])}}if(D.length===0){return this.endTour(true,false)}}else{if(x()){E=B();if(!i.getStepTarget(E)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}this.showStep(p,z);return this};this.nextStep=function(G){var F=B(),E=p,D=[];G=i.valOrDefault(G,true);if(q.skipIfNoElement){while(D.length===0&&A()){F=B();D=i.getStepTarget(F);if(D.length===0){i.invokeCallbacks("error",[u.id,p])}}if(!D.length){return this.endTour(true,false)}}else{if(A()){F=B();if(!i.getStepTarget(F)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}if(G){if(F.onNext){F.onNext()}i.invokeCallbacks("next",[u.id,E])}this.showStep(p,z);return this};this.endTour=function(F,E){var D=s();F=i.valOrDefault(F,true);E=i.valOrDefault(E,true);p=0;z=undefined;t=undefined;D.hide();if(F){i.clearState(q.cookieName)}l.isActive=false;if(E){i.invokeCallbacks("end",[u.id])}l.removeCallbacks(true);return this};this.getCurrTour=function(){return u};this.getCurrStepNum=function(){return p};this.getCurrSubstepNum=function(){return z};this.hasTakenTour=function(D){if(k){i.getState(q.cookieName+"_history")}return false};this.setHasTakenTour=function(E){var D;if(k&&!this.hasTakenTour(E)){D=i.getState(q.cookieName+"_history");if(D){D+=";"+E}else{D=E}}};this.clearHasTakenTour=function(J){var I,H,E,D,F=q.cookieName+"_history",G=false;if(k){I=i.getState(F);if(I){H=I.split(";");for(E=0,D=H.length;E<D;++E){if(H[E]===J){H.splice(E,1);G=true;break}}if(G){i.setState(F,H.join(";"))}}}};this.addCallback=function(F,D,E){if(D){g[F].push({cb:D,fromTour:E})}return this};this.removeCallbacks=function(E){var H,F,D,G;for(G in g){if(E){H=g[G];for(F=0,D=H.length;F<D;++F){if(H[F].fromTour){H.splice(F--,1);--D}}}else{g[G]=[]}}return this};this.resetDefaultOptions=function(){q={animate:false,smoothScroll:true,scrollDuration:1000,scrollTopMargin:200,showCloseButton:true,showPrevButton:false,showNextButton:true,bubbleWidth:280,bubblePadding:15,arrowWidth:20,skipIfNoElement:true,cookieName:"hopscotch.tour.state"}};r=function(E,F){var D;if(!q){this.resetDefaultOptions()}i.extend(q,E);if(E){i.extend(j,E.i18n)}this.addCallback("next",E.onNext,F).addCallback("prev",E.onPrev,F).addCallback("start",E.onStart,F).addCallback("end",E.onEnd,F).addCallback("error",E.onError,F).addCallback("close",E.onClose,F);D=s();if(q.animate){D.initAnimate()}else{D.removeAnimate()}D.showPrevButton(q.showPrevButton,true);D.showNextButton(q.showNextButton,true);D.showCloseButton(q.showCloseButton,true);return this};this.configure=function(D){return r.call(this,D,false)};this.init(o)};l=new m();b[c]=l}(window,"hopscotch"));
\ No newline at end of file
+(function(b,c){var m,e,j,i,g,h="undefined",l=b[c],a=false,k=(typeof window.sessionStorage!==h),f=document.body.style,d=(typeof f.MozTransition!==h||typeof f.MsTransition!==h||typeof f.webkitTransition!==h||typeof f.OTransition!==h||typeof f.transition!==h);if(l){return}$(window).load(function(){if(a){l.startTour()}});i={getPixelValue:function(o){var n=typeof o;if(n==="number"){return o}if(n==="string"){return parseInt(o,10)}return 0},valOrDefault:function(o,n){return typeof o!==h?o:n},invokeCallbacks:function(r,o){var q=g[r],p=0,n=q.length;for(;p<n;++p){q[p].cb.apply(this,o)}},getScrollTop:function(){if(typeof window.pageYOffset!==h){return window.pageYOffset}else{return document.documentElement.scrollTop}},getScrollLeft:function(){if(typeof window.pageXOffset!==h){return window.pageXOffset}else{return document.documentElement.scrollLeft}},extend:function(o,n){var p;for(p in n){if(n.hasOwnProperty(p)){o[p]=n[p]}}},getStepTarget:function(n){if(typeof n.target==="string"){return $("#"+n.target)}return $(n.target)},setState:function(p,q,r){var n="",o;if(k){sessionStorage.setItem(p,q)}else{if(r){o=new Date();o.setTime(o.getTime()+(r*24*60*60*1000));n="; expires="+o.toGMTString()}document.cookie=p+"="+q+n+"; path=/"}},getState:function(o){var q=o+"=",n=document.cookie.split(";"),p,r;if(k){return sessionStorage.getItem(o)}else{for(p=0;p<n.length;p++){r=n[p];while(r.charAt(0)===" "){r=r.substring(1,r.length)}if(r.indexOf(q)===0){return r.substring(q.length,r.length)}}return null}},clearState:function(n){if(k){sessionStorage.removeItem(n)}else{this.setState(n,"",-1)}}};g={next:[],prev:[],start:[],end:[],error:[],close:[]};j={stepNums:null,nextBtn:"Next",prevBtn:"Back",doneBtn:"Done",skipBtn:"Skip",closeTooltip:"Close"};e=function(s){var o=false,n,r=function(v,u){var t=$("<input>");t.attr({id:v,type:"button",value:u});t.addClass("hopscotch-nav-button");if(v.indexOf("prev")>=0){t.addClass("prev")}else{t.addClass("next")}return t},p=function(u,t,w){var v=w?"hide-all":"hide";if(typeof t===h){t=true}if(t){u.removeClass(v)}else{u.addClass(v)}},q=function(C,v,J){var F,t,D,u,A,B,E,w,z=6,H=i.getStepTarget(v)[0],I=C.$element,x=C.$arrowEl,G=i.getPixelValue(v.arrowOffset),y=v.fixedElement?"fixed":"absolute";J=i.valOrDefault(J,true);F=i.getPixelValue(v.width)||s.bubbleWidth;D=i.valOrDefault(v.padding,s.bubblePadding);I.removeClass("bounce-down bounce-up bounce-left bounce-right");u=H.getBoundingClientRect();if(v.orientation==="top"){t=I.height();E=(u.top-t)-s.arrowWidth;w=u.left;B="bounce-down"}else{if(v.orientation==="bottom"){E=u.bottom+s.arrowWidth;w=u.left;B="bounce-up"}else{if(v.orientation==="left"){E=u.top;w=u.left-F-2*D-2*z-s.arrowWidth;B="bounce-right"}else{if(v.orientation==="right"){E=u.top;w=u.right+s.arrowWidth;B="bounce-left"}}}}if(!G){x.css({top:"",left:""})}else{if(v.orientation==="top"||v.orientation==="bottom"){x.css({left:G+"px",top:""})}else{if(v.orientation==="left"||v.orientation==="right"){x.css({top:G+"px",left:""})}}}w+=i.getPixelValue(v.xOffset);E+=i.getPixelValue(v.yOffset);if(!v.fixedElement){E+=i.getScrollTop();w+=i.getScrollLeft()}if(s.animate&&!d){I.animate({top:E+"px",left:w+"px"}).css("position",y)}else{I.css({top:E+"px",left:w+"px",position:y});if(J){A=s.smoothScroll?s.scrollDuration:0;setTimeout(function(){I.addClass(B)},A);setTimeout(function(){I.removeClass(B)},A+2000)}}};this.init=function(){var w=$("<div>"),u=$("<div>"),x=$("<div>"),v=this,y=false,t;this.$element=w;this.$containerEl=u;this.$titleEl=$("<h3>");this.$numberEl=$("<span>");this.$contentEl=$("<p>");this.$numberEl.attr("id","hopscotch-bubble-number");x.append(this.$titleEl,this.$contentEl).attr("id","hopscotch-bubble-content");u.attr("id","hopscotch-bubble-container").append(this.$numberEl,x);w.attr("id","hopscotch-bubble").addClass("animated").append(u);this.initNavButtons();this.initCloseButton();this.initArrow();$(window).on("resize",function(){if(y||!o){return}y=true;t=setTimeout(function(){q(v,n,false);y=false},200)});this.hide();$("body").append(w);return this};this.initNavButtons=function(){var t=$("<div>");this.$prevBtnEl=r("hopscotch-prev",j.prevBtn);this.$nextBtnEl=r("hopscotch-next",j.nextBtn);this.$doneBtnEl=r("hopscotch-done",j.doneBtn);this.$doneBtnEl.addClass("hide");this.$prevBtnEl.click(function(u){l.prevStep()});this.$nextBtnEl.click(function(u){l.nextStep()});this.$doneBtnEl.click(l.endTour);t.attr("id","hopscotch-actions").append(this.$prevBtnEl,this.$nextBtnEl,this.$doneBtnEl);this.buttonsEl=t;this.$containerEl.append(t);return this};this.initCloseButton=function(){var t=$("<a>");t.text(j.closeTooltip).attr({id:"hopscotch-bubble-close",href:"#",title:j.closeTooltip}).click(function(v){var u=l.getCurrStepNum(),w=l.getCurrTour(),x=(u===w.steps.length-1);i.invokeCallbacks("close",[w.id,u]);l.endTour(true,x);if(v.preventDefault){v.preventDefault()}else{if(event){event.returnValue=false}}});this.closeBtnEl=t;this.$containerEl.append(t);return this};this.initArrow=function(){var u,t;this.$arrowEl=$("<div>").attr("id","hopscotch-bubble-arrow-container");t=$("<div>").addClass("hopscotch-bubble-arrow-border");u=$("<div>").addClass("hopscotch-bubble-arrow");this.$arrowEl.append(t,u);this.$element.append(this.$arrowEl);return this};this.renderStep=function(v,A,w,x,B){var C=this,u=i.valOrDefault(v.showNextButton,s.showNextButton),t=i.valOrDefault(v.showPrevButton,s.showPrevButton),z,y;n=v;this.setTitle(v.title?v.title:"");this.setContent(v.content?v.content:"");this.setNum(A);this.showPrevButton(this.$prevBtnEl&&t&&(A>0||w>0));this.showNextButton(this.$nextBtnEl&&u&&!x);this.$nextBtnEl.val(v.showSkip?j.skipBtn:j.nextBtn);if(x){this.$doneBtnEl.removeClass("hide")}else{this.$doneBtnEl.addClass("hide")}this.setArrow(v.orientation);z=i.getPixelValue(v.width)||s.bubbleWidth;y=i.valOrDefault(v.padding,s.bubblePadding);this.$containerEl.css({width:z+"px",padding:y+"px"});if(v.orientation==="top"){setTimeout(function(){q(C,v);if(B&&!v.fixedElement){B()}},5)}else{q(this,v);if(B&&!v.fixedElement){B()}}return this};this.setTitle=function(t){if(t){this.$titleEl.html(t).removeClass("hide")}else{this.$titleEl.addClass("hide")}return this};this.setContent=function(t){if(t){this.$contentEl.html(t).removeClass("hide")}else{this.$contentEl.addClass("hide")}return this};this.setNum=function(t){if(j.stepNums&&t<j.stepNums.length){t=j.stepNums[t]}else{t=t+1}this.$numberEl.html(t)};this.setArrow=function(t){if(t==="top"){this.$arrowEl.removeClass().addClass("down")}else{if(t==="bottom"){this.$arrowEl.removeClass().addClass("up")}else{if(t==="left"){this.$arrowEl.removeClass().addClass("right")}else{if(t==="right"){this.$arrowEl.removeClass().addClass("left")}}}}};this.show=function(){var t=this;if(s.animate){setTimeout(function(){t.$element.addClass("animate")},50)}this.$element.removeClass("hide");o=true;return this};this.hide=function(){this.$element.addClass("hide").removeClass("animate");o=false;return this};this.showPrevButton=function(t,u){p(this.$prevBtnEl,t,u)};this.showNextButton=function(t,u){p(this.$nextBtnEl,t,u)};this.showCloseButton=function(t,u){p(this.closeBtnEl,t,u)};this.initAnimate=function(){var t=this;setTimeout(function(){t.$element.addClass("animate")},50)};this.removeAnimate=function(){this.$element.removeClass("animate")};this.init()};m=function(o){var y,q,u,p,z,C,t,v,r,s=function(){if(!y){y=new e(q)}return y},B=function(){var D=u.steps[p];return(D.length>0)?D[z]:D},n=function(){return u.steps[p].length>0},A=function(){var D=u.steps[p].length;if(z<D-1){++z;return true}else{if(p<u.steps.length-1){++p;z=n()?0:undefined;return true}}return false},x=function(){var D;if(z>0){--z;return true}else{if(p>0){D=u.steps[--p].length;if(D){z=D-1}else{z=undefined}return true}}return false},w=function(){var H=s().$element,D=i.getPixelValue(H.css("top")),I=i.getStepTarget(B())[0],G=I.getBoundingClientRect(),J=G.top+i.getScrollTop(),F=(D<J)?D:J,E=F-q.scrollTopMargin;$("body, html").animate({scrollTop:E},q.scrollDuration)};this.init=function(){if(o){this.configure(o)}return this};this.loadTour=function(I){var G={},E,J,D,H,F;u=I;for(J in I){if(I.hasOwnProperty(J)&&J!=="id"&&J!=="steps"){G[J]=I[J]}}this.resetDefaultOptions();r.call(this,G,true);D=i.getState(q.cookieName);if(D){H=D.split(":");C=H[0];t=H[1];v=undefined;F=t.split("-");if(F.length>1){t=parseInt(F[0],10);v=parseInt(F[1],10)}else{t=parseInt(t,10)}if(H.length>2&&H[2]==="mp"){if(v&&v<u.steps[t].length-1){++v}else{if(t<u.steps.length-1){++t;if(u.steps[t].length>0){v=0}else{v=undefined}}}}}E=s();E.showPrevButton(q.showPrevButton,true);E.showNextButton(q.showNextButton,true);return this};this.startTour=function(G,F){var D,E;if(!u){throw"Need to load a tour before you start it!"}if(document.readyState!=="complete"){a=true;return this}if(typeof G!==h){p=G;z=F}else{if(u.id===C&&typeof t!==h){p=t;z=v;E=B();if(!i.getStepTarget(E)){x();E=B();if(!i.getStepTarget(E)){this.endTour(false,false);return this}}}else{p=0}}if(!z&&n()){z=0}i.invokeCallbacks("start",[u.id,p]);this.isActive=true;if(q.animate){D.initAnimate()}if(!i.getStepTarget(B())){i.invokeCallbacks("error",[u.id,p]);if(q.skipIfNoElement){this.nextStep(false)}}else{this.showStep(p,z)}return this};this.showStep=function(H,F){var K=u.steps,I=K[H],G=K.length,E=u.id+":"+H,D=s(),J;p=H;z=F;if(typeof F!==h&&n()){I=I[F];E+="-"+F}J=(H===G-1)||(F>=I.length-1);D.renderStep(I,H,F,J,w);if(I.multipage){E+=":mp"}i.setState(q.cookieName,E,1);s().show();return this};this.prevStep=function(){var E=B(),D=[];if(E.onPrev){E.onPrev()}i.invokeCallbacks("prev",[u.id,p]);if(q.skipIfNoElement){while(D.length===0&&x()){E=B();D=i.getStepTarget(E);if(D.length===0){i.invokeCallbacks("error",[u.id,p])}}if(D.length===0){return this.endTour(true,false)}}else{if(x()){E=B();if(!i.getStepTarget(E)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}this.showStep(p,z);return this};this.nextStep=function(G){var F=B(),E=p,D=[];G=i.valOrDefault(G,true);if(q.skipIfNoElement){while(D.length===0&&A()){F=B();D=i.getStepTarget(F);if(D.length===0){i.invokeCallbacks("error",[u.id,p])}}if(!D.length){return this.endTour(true,false)}}else{if(A()){F=B();if(!i.getStepTarget(F)){i.invokeCallbacks("error",[u.id,p]);return this.endTour(true,false)}}}if(G){if(F.onNext){F.onNext()}i.invokeCallbacks("next",[u.id,E])}this.showStep(p,z);return this};this.endTour=function(F,E){var D=s();F=i.valOrDefault(F,true);E=i.valOrDefault(E,true);p=0;z=undefined;t=undefined;D.hide();if(F){i.clearState(q.cookieName)}l.isActive=false;if(E){i.invokeCallbacks("end",[u.id])}l.removeCallbacks(true);return this};this.getCurrTour=function(){return u};this.getCurrStepNum=function(){return p};this.getCurrSubstepNum=function(){return z};this.hasTakenTour=function(D){if(k){i.getState(q.cookieName+"_history")}return false};this.setHasTakenTour=function(E){var D;if(k&&!this.hasTakenTour(E)){D=i.getState(q.cookieName+"_history");if(D){D+=";"+E}else{D=E}}};this.clearHasTakenTour=function(J){var I,H,E,D,F=q.cookieName+"_history",G=false;if(k){I=i.getState(F);if(I){H=I.split(";");for(E=0,D=H.length;E<D;++E){if(H[E]===J){H.splice(E,1);G=true;break}}if(G){i.setState(F,H.join(";"))}}}};this.addCallback=function(F,D,E){if(D){g[F].push({cb:D,fromTour:E})}return this};this.removeCallbacks=function(E){var H,F,D,G;for(G in g){if(E){H=g[G];for(F=0,D=H.length;F<D;++F){if(H[F].fromTour){H.splice(F--,1);--D}}}else{g[G]=[]}}return this};this.resetDefaultOptions=function(){q={animate:false,smoothScroll:true,scrollDuration:1000,scrollTopMargin:200,showCloseButton:true,showPrevButton:false,showNextButton:true,bubbleWidth:280,bubblePadding:15,arrowWidth:20,skipIfNoElement:true,cookieName:"hopscotch.tour.state"}};r=function(E,F){var D;if(!q){this.resetDefaultOptions()}i.extend(q,E);if(E){i.extend(j,E.i18n)}this.addCallback("next",E.onNext,F).addCallback("prev",E.onPrev,F).addCallback("start",E.onStart,F).addCallback("end",E.onEnd,F).addCallback("error",E.onError,F).addCallback("close",E.onClose,F);D=s();if(q.animate){D.initAnimate()}else{D.removeAnimate()}D.showPrevButton(q.showPrevButton,true);D.showNextButton(q.showNextButton,true);D.showCloseButton(q.showCloseButton,true);return this};this.configure=function(D){return r.call(this,D,false)};this.init(o)};l=new m();b[c]=l}(window,"hopscotch"));
\ No newline at end of file
diff --git a/js/hopscotch_jquery.js b/js/hopscotch_jquery.js
index eb536faf..64b0d84c 100644
--- a/js/hopscotch_jquery.js
+++ b/js/hopscotch_jquery.js
@@ -247,7 +247,8 @@
           targetEl     = utils.getStepTarget(step)[0],
           $el          = bubble.$element,
           $arrowEl     = bubble.$arrowEl,
-          arrowOffset  = utils.getPixelValue(step.arrowOffset);
+          arrowOffset  = utils.getPixelValue(step.arrowOffset),
+          position     = step.fixedElement ? 'fixed' : 'absolute';
 
       bounce        = utils.valOrDefault(bounce, true);
       bubbleWidth   = utils.getPixelValue(step.width) || opt.bubbleWidth;
@@ -304,24 +305,23 @@
       top += utils.getPixelValue(step.yOffset);
 
       // ADJUST TOP FOR SCROLL POSITION
-      top += utils.getScrollTop();
-      left += utils.getScrollLeft();
+      if (!step.fixedElement) {
+        top += utils.getScrollTop();
+        left += utils.getScrollLeft();
+      }
 
-      if (opt.animate) {
-        if (!hasCssTransitions && opt.animate) {
-          $el.animate({
-            top: top + 'px',
-            left: left + 'px'
-          });
-        }
-        else { // hasCssTransitions || !opt.animate
-          $el.css('top', top + 'px');
-          $el.css('left', left + 'px');
-        }
+      if (opt.animate && !hasCssTransitions) {
+        $el.animate({
+          top: top + 'px',
+          left: left + 'px'
+        }).css('position', position);
       }
       else {
-        $el.css('top', top + 'px');
-        $el.css('left', left + 'px');
+        $el.css({
+          top: top + 'px',
+          left: left + 'px',
+          position: position
+        });
 
         // Do the bouncing effect
         if (bounce) {
@@ -501,13 +501,13 @@
         // Timeout to get correct height of bubble for positioning.
         setTimeout(function() {
           setPosition(self, step);
-          if (callback) { callback(); }
+          if (callback && !step.fixedElement) { callback(); }
         }, 5);
       }
       else {
         // Don't care about height for the other orientations.
         setPosition(this, step);
-        if (callback) { callback(); }
+        if (callback && !step.fixedElement) { callback(); }
       }
 
       return this;