Browse files

Version 0.5.0

  • Loading branch information...
1 parent 2151380 commit 2ef69350091d4dadc9f170a8496cba64f07aa73c @bbarakaci committed Jun 16, 2016
Showing with 28 additions and 19 deletions.
  1. +4 −0 README.md
  2. +20 −15 dist/fixto.js
  3. +2 −2 dist/fixto.min.js
  4. +1 −1 grunt.js
  5. +1 −1 package.json
View
4 README.md
@@ -183,6 +183,10 @@ jQuery:
Or we will choose the other path. We will decide to implement the features we need to have fixto as a plugin that does its own magic. Please open an issue if you would like to see additional features when running on native sticky mode. If there is an issue, just participate with your +1. It will help us to decide for the future.
## Release notes
+### 0.5.0
+- Sensitivity to the viewport is now an optional feature.
+- Added MIT license.
+
### 0.4.0
- Added "mindBottomPadding" option, to make including parent's bottom padding optional when calculating max bottom position of the fixed element
View
35 dist/fixto.js
@@ -1,4 +1,4 @@
-/*! fixto - v0.4.0 - 2015-06-08
+/*! fixto - v0.5.0 - 2016-06-16
* http://github.com/bbarakaci/fixto/*/
@@ -303,7 +303,8 @@ var fixto = (function ($, window, document) {
this.parent = parent;
this.options = {
className: 'fixto-fixed',
- top: 0
+ top: 0,
+ mindViewport: false
};
this._setOptions(options);
}
@@ -437,19 +438,9 @@ var fixto = (function ($, window, document) {
this._parentBottom -= computedStyle.getFloat(this.parent, 'paddingBottom');
}
- if (!this.fixed) {
-
- var childStyles = computedStyle.getAll(this.child);
-
- if (
- this._scrollTop < this._parentBottom &&
- this._scrollTop > (this._fullOffset('offsetTop', this.child) - this.options.top - this._mindtop()) &&
- this._viewportHeight > (this.child.offsetHeight + computedStyle.toFloat(childStyles.marginTop) + computedStyle.toFloat(childStyles.marginBottom))
- ) {
-
- this._fix();
- this._adjust();
- }
+ if (!this.fixed && this._shouldFix()) {
+ this._fix();
+ this._adjust();
} else {
if (this._scrollTop > this._parentBottom || this._scrollTop < (this._fullOffset('offsetTop', this._ghostNode) - this.options.top - this._mindtop())) {
this._unfix();
@@ -459,6 +450,20 @@ var fixto = (function ($, window, document) {
}
},
+ _shouldFix: function() {
+ if (this._scrollTop < this._parentBottom && this._scrollTop > (this._fullOffset('offsetTop', this.child) - this.options.top - this._mindtop())) {
+ if (this.options.mindViewport && !this._isViewportAvailable()) {
+ return false;
+ }
+ return true;
+ }
+ },
+
+ _isViewportAvailable: function() {
+ var childStyles = computedStyle.getAll(this.child);
+ return this._viewportHeight > (this.child.offsetHeight + computedStyle.toFloat(childStyles.marginTop) + computedStyle.toFloat(childStyles.marginBottom));
+ },
+
_adjust: function _adjust() {
var top = 0;
var mindTop = this._mindtop();
View
4 dist/fixto.min.js
@@ -1,3 +1,3 @@
-/*! fixto - v0.4.0 - 2015-06-08
+/*! fixto - v0.5.0 - 2016-06-16
* http://github.com/bbarakaci/fixto/*/
-var fixto=function(a,b,c){function f(){this._vendor=null}function j(){var a=!1,b=c.createElement("div"),d=c.createElement("div");b.appendChild(d),b.style[h]="translate(0)",b.style.marginTop="10px",b.style.visibility="hidden",d.style.position="fixed",d.style.top=0,c.body.appendChild(b);var e=d.getBoundingClientRect();return e.top>0&&(a=!0),c.body.removeChild(b),a}function o(b,c,d){this.child=b,this._$child=a(b),this.parent=c,this.options={className:"fixto-fixed",top:0},this._setOptions(d)}function p(a,b,c){o.call(this,a,b,c),this._replacer=new e.MimicNode(a),this._ghostNode=this._replacer.replacer,this._saveStyles(),this._saveViewportHeight(),this._proxied_onscroll=this._bind(this._onscroll,this),this._proxied_onresize=this._bind(this._onresize,this),this.start()}function q(a,b,c){o.call(this,a,b,c),this.start()}var d=function(){var a={getAll:function(a){return c.defaultView.getComputedStyle(a)},get:function(a,b){return this.getAll(a)[b]},toFloat:function(a){return parseFloat(a,10)||0},getFloat:function(a,b){return this.toFloat(this.get(a,b))},_getAllCurrentStyle:function(a){return a.currentStyle}};return c.documentElement.currentStyle&&(a.getAll=a._getAllCurrentStyle),a}(),e=function(){function b(a){this.element=a,this.replacer=c.createElement("div"),this.replacer.style.visibility="hidden",this.hide(),a.parentNode.insertBefore(this.replacer,a)}b.prototype={replace:function(){var a=this.replacer.style,b=d.getAll(this.element);a.width=this._width(),a.height=this._height(),a.marginTop=b.marginTop,a.marginBottom=b.marginBottom,a.marginLeft=b.marginLeft,a.marginRight=b.marginRight,a.cssFloat=b.cssFloat,a.styleFloat=b.styleFloat,a.position=b.position,a.top=b.top,a.right=b.right,a.bottom=b.bottom,a.left=b.left,a.display=b.display},hide:function(){this.replacer.style.display="none"},_width:function(){return this.element.getBoundingClientRect().width+"px"},_widthOffset:function(){return this.element.offsetWidth+"px"},_height:function(){return this.element.getBoundingClientRect().height+"px"},_heightOffset:function(){return this.element.offsetHeight+"px"},destroy:function(){a(this.replacer).remove();for(var b in this)this.hasOwnProperty(b)&&(this[b]=null)}};var e=c.documentElement.getBoundingClientRect();return e.width||(b.prototype._width=b.prototype._widthOffset,b.prototype._height=b.prototype._heightOffset),{MimicNode:b,computedStyle:d}}();f.prototype={_vendors:{webkit:{cssPrefix:"-webkit-",jsPrefix:"Webkit"},moz:{cssPrefix:"-moz-",jsPrefix:"Moz"},ms:{cssPrefix:"-ms-",jsPrefix:"ms"},opera:{cssPrefix:"-o-",jsPrefix:"O"}},_prefixJsProperty:function(a,b){return a.jsPrefix+b[0].toUpperCase()+b.substr(1)},_prefixValue:function(a,b){return a.cssPrefix+b},_valueSupported:function(a,b,c){try{return c.style[a]=b,c.style[a]===b}catch(d){return!1}},propertySupported:function(a){return c.documentElement.style[a]!==undefined},getJsProperty:function(a){if(this.propertySupported(a))return a;if(this._vendor)return this._prefixJsProperty(this._vendor,a);var b;for(var c in this._vendors){b=this._prefixJsProperty(this._vendors[c],a);if(this.propertySupported(b))return this._vendor=this._vendors[c],b}return null},getCssValue:function(a,b){var d=c.createElement("div"),e=this.getJsProperty(a);if(this._valueSupported(e,b,d))return b;var f;if(this._vendor){f=this._prefixValue(this._vendor,b);if(this._valueSupported(e,f,d))return f}for(var g in this._vendors){f=this._prefixValue(this._vendors[g],b);if(this._valueSupported(e,f,d))return this._vendor=this._vendors[g],f}return null}};var g=new f,h=g.getJsProperty("transform"),i,k=g.getCssValue("position","sticky"),l=g.getCssValue("position","fixed"),m=navigator.appName==="Microsoft Internet Explorer",n;m&&(n=parseFloat(navigator.appVersion.split("MSIE")[1])),o.prototype={_mindtop:function(){var a=0;if(this._$mind){var b,c,e;for(var f=0,g=this._$mind.length;f<g;f++){b=this._$mind[f],c=b.getBoundingClientRect();if(c.height)a+=c.height;else{var h=d.getAll(b);a+=b.offsetHeight+d.toFloat(h.marginTop)+d.toFloat(h.marginBottom)}}}return a},stop:function(){this._stop(),this._running=!1},start:function(){this._running||(this._start(),this._running=!0)},destroy:function(){this.stop(),this._destroy(),this._$child.removeData("fixto-instance");for(var a in this)this.hasOwnProperty(a)&&(this[a]=null)},_setOptions:function(b){a.extend(this.options,b),this.options.mind&&(this._$mind=a(this.options.mind)),this.options.zIndex&&(this.child.style.zIndex=this.options.zIndex)},setOptions:function(a){this._setOptions(a),this.refresh()},_stop:function(){},_start:function(){},_destroy:function(){},refresh:function(){}},p.prototype=new o,a.extend(p.prototype,{_bind:function(a,b){return function(){return a.call(b)}},_toresize:n===8?c.documentElement:b,_onscroll:function(){this._scrollTop=c.documentElement.scrollTop||c.body.scrollTop,this._parentBottom=this.parent.offsetHeight+this._fullOffset("offsetTop",this.parent),this.options.mindBottomPadding!==!1&&(this._parentBottom-=d.getFloat(this.parent,"paddingBottom"));if(!this.fixed){var a=d.getAll(this.child);this._scrollTop<this._parentBottom&&this._scrollTop>this._fullOffset("offsetTop",this.child)-this.options.top-this._mindtop()&&this._viewportHeight>this.child.offsetHeight+d.toFloat(a.marginTop)+d.toFloat(a.marginBottom)&&(this._fix(),this._adjust())}else{if(this._scrollTop>this._parentBottom||this._scrollTop<this._fullOffset("offsetTop",this._ghostNode)-this.options.top-this._mindtop()){this._unfix();return}this._adjust()}},_adjust:function(){var a=0,b=this._mindtop(),c=0,e=d.getAll(this.child),f=null;i&&(f=this._getContext(),f&&(a=Math.abs(f.getBoundingClientRect().top))),c=this._parentBottom-this._scrollTop-(this.child.offsetHeight+d.toFloat(e.marginBottom)+b+this.options.top),c>0&&(c=0),this.child.style.top=c+b+a+this.options.top-d.toFloat(e.marginTop)+"px"},_fullOffset:function(a,b,c){var d=b[a],e=b.offsetParent;while(e!==null&&e!==c)d=d+e[a],e=e.offsetParent;return d},_getContext:function(){var a,b=this.child,e=null,f;while(!e){a=b.parentNode;if(a===c.documentElement)return null;f=d.getAll(a);if(f[h]!=="none"){e=a;break}b=a}return e},_fix:function(){var a=this.child,b=a.style,e=d.getAll(a),f=a.getBoundingClientRect().left,g=e.width;this._saveStyles(),c.documentElement.currentStyle&&(g=a.offsetWidth-(d.toFloat(e.paddingLeft)+d.toFloat(e.paddingRight)+d.toFloat(e.borderLeftWidth)+d.toFloat(e.borderRightWidth))+"px");if(i){var h=this._getContext();h&&(f=a.getBoundingClientRect().left-h.getBoundingClientRect().left)}this._replacer.replace(),b.left=f-d.toFloat(e.marginLeft)+"px",b.width=g,b.position="fixed",b.top=this._mindtop()+this.options.top-d.toFloat(e.marginTop)+"px",this._$child.addClass(this.options.className),this.fixed=!0},_unfix:function(){var a=this.child.style;this._replacer.hide(),a.position=this._childOriginalPosition,a.top=this._childOriginalTop,a.width=this._childOriginalWidth,a.left=this._childOriginalLeft,this._$child.removeClass(this.options.className),this.fixed=!1},_saveStyles:function(){var a=this.child.style;this._childOriginalPosition=a.position,this._childOriginalTop=a.top,this._childOriginalWidth=a.width,this._childOriginalLeft=a.left},_onresize:function(){this.refresh()},_saveViewportHeight:function(){this._viewportHeight=b.innerHeight||c.documentElement.clientHeight},_stop:function(){this._unfix(),a(b).unbind("scroll",this._proxied_onscroll),a(this._toresize).unbind("resize",this._proxied_onresize)},_start:function(){this._onscroll(),a(b).bind("scroll",this._proxied_onscroll),a(this._toresize).bind("resize",this._proxied_onresize)},_destroy:function(){this._replacer.destroy()},refresh:function(){this._saveViewportHeight(),this._unfix(),this._onscroll()}}),q.prototype=new o,a.extend(q.prototype,{_start:function(){var a=d.getAll(this.child);this._childOriginalPosition=a.position,this._childOriginalTop=a.top,this.child.style.position=k,this.refresh()},_stop:function(){this.child.style.position=this._childOriginalPosition,this.child.style.top=this._childOriginalTop},refresh:function(){this.child.style.top=this._mindtop()+this.options.top+"px"}});var r=function(a,b,c){return k&&!c||k&&c&&c.useNativeSticky!==!1?new q(a,b,c):l?(i===undefined&&(i=j()),new p(a,b,c)):"Neither fixed nor sticky positioning supported"};return n<8&&(r=function(){return"not supported"}),a.fn.fixTo=function(b,c){var d=a(b),e=0;return this.each(function(){var f=a(this).data("fixto-instance");if(!f)a(this).data("fixto-instance",r(this,d[e],c));else{var g=b;f[g].call(f,c)}e++})},{FixToContainer:p,fixTo:r,computedStyle:d,mimicNode:e}}(window.jQuery,window,document);
+var fixto=function(e,t,n){function s(){this._vendor=null}function f(){var e=!1,t=n.createElement("div"),r=n.createElement("div");t.appendChild(r),t.style[u]="translate(0)",t.style.marginTop="10px",t.style.visibility="hidden",r.style.position="fixed",r.style.top=0,n.body.appendChild(t);var i=r.getBoundingClientRect();return i.top>0&&(e=!0),n.body.removeChild(t),e}function d(t,n,r){this.child=t,this._$child=e(t),this.parent=n,this.options={className:"fixto-fixed",top:0,mindViewport:!1},this._setOptions(r)}function v(e,t,n){d.call(this,e,t,n),this._replacer=new i.MimicNode(e),this._ghostNode=this._replacer.replacer,this._saveStyles(),this._saveViewportHeight(),this._proxied_onscroll=this._bind(this._onscroll,this),this._proxied_onresize=this._bind(this._onresize,this),this.start()}function m(e,t,n){d.call(this,e,t,n),this.start()}var r=function(){var e={getAll:function(e){return n.defaultView.getComputedStyle(e)},get:function(e,t){return this.getAll(e)[t]},toFloat:function(e){return parseFloat(e,10)||0},getFloat:function(e,t){return this.toFloat(this.get(e,t))},_getAllCurrentStyle:function(e){return e.currentStyle}};return n.documentElement.currentStyle&&(e.getAll=e._getAllCurrentStyle),e}(),i=function(){function t(e){this.element=e,this.replacer=n.createElement("div"),this.replacer.style.visibility="hidden",this.hide(),e.parentNode.insertBefore(this.replacer,e)}t.prototype={replace:function(){var e=this.replacer.style,t=r.getAll(this.element);e.width=this._width(),e.height=this._height(),e.marginTop=t.marginTop,e.marginBottom=t.marginBottom,e.marginLeft=t.marginLeft,e.marginRight=t.marginRight,e.cssFloat=t.cssFloat,e.styleFloat=t.styleFloat,e.position=t.position,e.top=t.top,e.right=t.right,e.bottom=t.bottom,e.left=t.left,e.display=t.display},hide:function(){this.replacer.style.display="none"},_width:function(){return this.element.getBoundingClientRect().width+"px"},_widthOffset:function(){return this.element.offsetWidth+"px"},_height:function(){return this.element.getBoundingClientRect().height+"px"},_heightOffset:function(){return this.element.offsetHeight+"px"},destroy:function(){e(this.replacer).remove();for(var t in this)this.hasOwnProperty(t)&&(this[t]=null)}};var i=n.documentElement.getBoundingClientRect();return i.width||(t.prototype._width=t.prototype._widthOffset,t.prototype._height=t.prototype._heightOffset),{MimicNode:t,computedStyle:r}}();s.prototype={_vendors:{webkit:{cssPrefix:"-webkit-",jsPrefix:"Webkit"},moz:{cssPrefix:"-moz-",jsPrefix:"Moz"},ms:{cssPrefix:"-ms-",jsPrefix:"ms"},opera:{cssPrefix:"-o-",jsPrefix:"O"}},_prefixJsProperty:function(e,t){return e.jsPrefix+t[0].toUpperCase()+t.substr(1)},_prefixValue:function(e,t){return e.cssPrefix+t},_valueSupported:function(e,t,n){try{return n.style[e]=t,n.style[e]===t}catch(r){return!1}},propertySupported:function(e){return n.documentElement.style[e]!==undefined},getJsProperty:function(e){if(this.propertySupported(e))return e;if(this._vendor)return this._prefixJsProperty(this._vendor,e);var t;for(var n in this._vendors){t=this._prefixJsProperty(this._vendors[n],e);if(this.propertySupported(t))return this._vendor=this._vendors[n],t}return null},getCssValue:function(e,t){var r=n.createElement("div"),i=this.getJsProperty(e);if(this._valueSupported(i,t,r))return t;var s;if(this._vendor){s=this._prefixValue(this._vendor,t);if(this._valueSupported(i,s,r))return s}for(var o in this._vendors){s=this._prefixValue(this._vendors[o],t);if(this._valueSupported(i,s,r))return this._vendor=this._vendors[o],s}return null}};var o=new s,u=o.getJsProperty("transform"),a,l=o.getCssValue("position","sticky"),c=o.getCssValue("position","fixed"),h=navigator.appName==="Microsoft Internet Explorer",p;h&&(p=parseFloat(navigator.appVersion.split("MSIE")[1])),d.prototype={_mindtop:function(){var e=0;if(this._$mind){var t,n,i;for(var s=0,o=this._$mind.length;s<o;s++){t=this._$mind[s],n=t.getBoundingClientRect();if(n.height)e+=n.height;else{var u=r.getAll(t);e+=t.offsetHeight+r.toFloat(u.marginTop)+r.toFloat(u.marginBottom)}}}return e},stop:function(){this._stop(),this._running=!1},start:function(){this._running||(this._start(),this._running=!0)},destroy:function(){this.stop(),this._destroy(),this._$child.removeData("fixto-instance");for(var e in this)this.hasOwnProperty(e)&&(this[e]=null)},_setOptions:function(t){e.extend(this.options,t),this.options.mind&&(this._$mind=e(this.options.mind)),this.options.zIndex&&(this.child.style.zIndex=this.options.zIndex)},setOptions:function(e){this._setOptions(e),this.refresh()},_stop:function(){},_start:function(){},_destroy:function(){},refresh:function(){}},v.prototype=new d,e.extend(v.prototype,{_bind:function(e,t){return function(){return e.call(t)}},_toresize:p===8?n.documentElement:t,_onscroll:function(){this._scrollTop=n.documentElement.scrollTop||n.body.scrollTop,this._parentBottom=this.parent.offsetHeight+this._fullOffset("offsetTop",this.parent),this.options.mindBottomPadding!==!1&&(this._parentBottom-=r.getFloat(this.parent,"paddingBottom"));if(!this.fixed&&this._shouldFix())this._fix(),this._adjust();else{if(this._scrollTop>this._parentBottom||this._scrollTop<this._fullOffset("offsetTop",this._ghostNode)-this.options.top-this._mindtop()){this._unfix();return}this._adjust()}},_shouldFix:function(){if(this._scrollTop<this._parentBottom&&this._scrollTop>this._fullOffset("offsetTop",this.child)-this.options.top-this._mindtop())return this.options.mindViewport&&!this._isViewportAvailable()?!1:!0},_isViewportAvailable:function(){var e=r.getAll(this.child);return this._viewportHeight>this.child.offsetHeight+r.toFloat(e.marginTop)+r.toFloat(e.marginBottom)},_adjust:function(){var t=0,n=this._mindtop(),i=0,s=r.getAll(this.child),o=null;a&&(o=this._getContext(),o&&(t=Math.abs(o.getBoundingClientRect().top))),i=this._parentBottom-this._scrollTop-(this.child.offsetHeight+r.toFloat(s.marginBottom)+n+this.options.top),i>0&&(i=0),this.child.style.top=i+n+t+this.options.top-r.toFloat(s.marginTop)+"px"},_fullOffset:function(t,n,r){var i=n[t],s=n.offsetParent;while(s!==null&&s!==r)i+=s[t],s=s.offsetParent;return i},_getContext:function(){var e,t=this.child,i=null,s;while(!i){e=t.parentNode;if(e===n.documentElement)return null;s=r.getAll(e);if(s[u]!=="none"){i=e;break}t=e}return i},_fix:function(){var t=this.child,i=t.style,s=r.getAll(t),o=t.getBoundingClientRect().left,u=s.width;this._saveStyles(),n.documentElement.currentStyle&&(u=t.offsetWidth-(r.toFloat(s.paddingLeft)+r.toFloat(s.paddingRight)+r.toFloat(s.borderLeftWidth)+r.toFloat(s.borderRightWidth))+"px");if(a){var f=this._getContext();f&&(o=t.getBoundingClientRect().left-f.getBoundingClientRect().left)}this._replacer.replace(),i.left=o-r.toFloat(s.marginLeft)+"px",i.width=u,i.position="fixed",i.top=this._mindtop()+this.options.top-r.toFloat(s.marginTop)+"px",this._$child.addClass(this.options.className),this.fixed=!0},_unfix:function(){var t=this.child.style;this._replacer.hide(),t.position=this._childOriginalPosition,t.top=this._childOriginalTop,t.width=this._childOriginalWidth,t.left=this._childOriginalLeft,this._$child.removeClass(this.options.className),this.fixed=!1},_saveStyles:function(){var e=this.child.style;this._childOriginalPosition=e.position,this._childOriginalTop=e.top,this._childOriginalWidth=e.width,this._childOriginalLeft=e.left},_onresize:function(){this.refresh()},_saveViewportHeight:function(){this._viewportHeight=t.innerHeight||n.documentElement.clientHeight},_stop:function(){this._unfix(),e(t).unbind("scroll",this._proxied_onscroll),e(this._toresize).unbind("resize",this._proxied_onresize)},_start:function(){this._onscroll(),e(t).bind("scroll",this._proxied_onscroll),e(this._toresize).bind("resize",this._proxied_onresize)},_destroy:function(){this._replacer.destroy()},refresh:function(){this._saveViewportHeight(),this._unfix(),this._onscroll()}}),m.prototype=new d,e.extend(m.prototype,{_start:function(){var e=r.getAll(this.child);this._childOriginalPosition=e.position,this._childOriginalTop=e.top,this.child.style.position=l,this.refresh()},_stop:function(){this.child.style.position=this._childOriginalPosition,this.child.style.top=this._childOriginalTop},refresh:function(){this.child.style.top=this._mindtop()+this.options.top+"px"}});var g=function(t,n,r){return l&&!r||l&&r&&r.useNativeSticky!==!1?new m(t,n,r):c?(a===undefined&&(a=f()),new v(t,n,r)):"Neither fixed nor sticky positioning supported"};return p<8&&(g=function(){return"not supported"}),e.fn.fixTo=function(t,n){var r=e(t),i=0;return this.each(function(){var s=e(this).data("fixto-instance");if(!s)e(this).data("fixto-instance",g(this,r[i],n));else{var o=t;s[o].call(s,n)}i++})},{FixToContainer:v,fixTo:g,computedStyle:r,mimicNode:i}}(window.jQuery,window,document);
View
2 grunt.js
@@ -4,7 +4,7 @@ module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
meta: {
- version: '0.4.0',
+ version: grunt.file.readJSON('package.json').version,
banner: '/*! fixto - v<%= meta.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'* http://github.com/bbarakaci/fixto/' +
View
2 package.json
@@ -1,6 +1,6 @@
{
"name": "fixto",
- "version": "0.4.0",
+ "version": "0.5.0",
"description": "A jQuery plugin for custom sticky positioning",
"main": "dist/fixto.min.js",
"devDependencies": {

0 comments on commit 2ef6935

Please sign in to comment.