From 91228c6aad7c12b0a8bbe7cc226689776a58e03b Mon Sep 17 00:00:00 2001 From: Wyatt Pultz Date: Mon, 23 Jan 2017 15:15:18 -0500 Subject: [PATCH 1/2] add option to use the polyfill regardless of browser support --- dist/sticky-position.js | 13 +++++++++---- dist/sticky-position.min.js | 2 +- src/sticky-position.js | 25 ++++++++++++++----------- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/dist/sticky-position.js b/dist/sticky-position.js index b00b3ce..5bcaf2c 100644 --- a/dist/sticky-position.js +++ b/dist/sticky-position.js @@ -19,7 +19,7 @@ 'use strict'; module.exports = function () { - var _ref = arguments[0] === undefined ? {} : arguments[0]; + var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; var _ref$primary = _ref.primary; var primary = _ref$primary === undefined ? null : _ref$primary; @@ -29,6 +29,8 @@ var wrapper = _ref$wrapper === undefined ? null : _ref$wrapper; var _ref$computeWidth = _ref.computeWidth; var computeWidth = _ref$computeWidth === undefined ? true : _ref$computeWidth; + var _ref$favorPolyfill = _ref.favorPolyfill; + var favorPolyfill = _ref$favorPolyfill === undefined ? false : _ref$favorPolyfill; var top = null; var isSticky = false; @@ -36,13 +38,15 @@ var nativeSupport = (function () { if (this.isSupported !== null) { return this.isSupported; - } else { + } else if (!favorPolyfill) { var style = document.createElement('test').style; style.cssText = ['-webkit-', '-ms-', ''].map(function (prefix) { return 'position: ' + prefix + 'sticky'; }).join(';'); this.isSupported = style.position.indexOf('sticky') !== -1; return this.isSupported; + } else { + return false; } }).bind({ isSupported: null }); @@ -71,7 +75,7 @@ supportsPassive = true; } }); - window.addEventListener('test', null, opts); + window.addEventListener("test", null, opts); } catch (e) {} // positioning necessary for getComputedStyle to report the correct z-index value. @@ -133,7 +137,8 @@ return { update: update, - destroy: destroy }; + destroy: destroy + }; } }; }); \ No newline at end of file diff --git a/dist/sticky-position.min.js b/dist/sticky-position.min.js index 278403f..8116f69 100644 --- a/dist/sticky-position.min.js +++ b/dist/sticky-position.min.js @@ -3,4 +3,4 @@ license: MIT http://www.jacklmoore.com/sticky-position */ -!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var i={exports:{}};t(i.exports,i),e.stickyPosition=i.exports}}(this,function(e,t){"use strict";t.exports=function(){function e(){v!==!0&&(r.style.position="fixed",v=!0)}function t(){v!==!1&&(r.style.position="relative",r.style.width="",r.style.top="",r.style.left="",p.style.height="",p.style.width="",v=!1)}function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(i){}a.style.position="relative";var o=window.getComputedStyle(a,null);y=parseInt(o.top)||0,r.style.zIndex=o.zIndex,r.style.position="relative",a.style.top=0,p.style.overflow="hidden",n(),window.addEventListener("load",n),window.addEventListener("scroll",n,e?{passive:!0}:!1),window.addEventListener("resize",n)}function n(){var i=a.getBoundingClientRect(),n=i.top `position: ${prefix}sticky`).join(';'); this.isSupported = style.position.indexOf('sticky') !== -1; return this.isSupported; + } else { + return false; } }).bind({isSupported: null}); @@ -45,7 +48,7 @@ export default function({ }); window.addEventListener("test", null, opts); } catch (e) {} - + // positioning necessary for getComputedStyle to report the correct z-index value. wrapper.style.position = 'relative'; @@ -68,24 +71,24 @@ export default function({ function update() { const rect = wrapper.getBoundingClientRect(); const sticky = rect.top < top; - + if (sticky) { placeholder.style.height = rect.height + 'px'; - + if (computeWidth) { placeholder.style.width = rect.width + 'px'; } - + var parentRect = wrapper.parentNode.getBoundingClientRect(); - + primary.style.top = Math.min(parentRect.top + parentRect.height - rect.height, top) + 'px'; primary.style.width = computeWidth ? rect.width+'px' : '100%'; primary.style.left = rect.left + 'px'; - + stick(); } else { unstick(); - } + } } function destroy() { @@ -94,7 +97,7 @@ export default function({ window.removeEventListener('resize', update); unstick(); } - + if (nativeSupport()) { return { update(){}, @@ -108,4 +111,4 @@ export default function({ destroy, }; } -} \ No newline at end of file +} From 5897ddc802b78e527dcb576655d411a203b1ee18 Mon Sep 17 00:00:00 2001 From: Wyatt Pultz Date: Mon, 23 Jan 2017 15:32:52 -0500 Subject: [PATCH 2/2] add description of options in the readme --- readme.md | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 8d40f85..3cc23d3 100644 --- a/readme.md +++ b/readme.md @@ -6,9 +6,31 @@ A `position: sticky` polyfill that's dependency-free and does not modify the DOM Todo +#### Options + +##### primary + +The DOM node to be made sticky. + +##### placeholder + +The placeholder is given the height of the primary node when the primary node becomes sticky. This is to maintain the height of the wrapper node when the primary node sticks. + +##### wrapper + +DOM node that wraps the primary and placeholder nodes. + +##### computeWidth + +Flag that, when true, will cause the width of the primary and placeholder nodes to be set to the width of the wrapper node. + +##### favorPolyfill + +Flag that, when true, will override the native browser implementation of sticky positioning and use the polyfill. This is useful if you are experiencing oddities with the native implementation. + ##### Install via NPM ```bash npm install sticky-position ``` -Released under the [MIT License](http://www.opensource.org/licenses/mit-license.php) \ No newline at end of file +Released under the [MIT License](http://www.opensource.org/licenses/mit-license.php)