Favor polyfill option

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,20 +29,24 @@
 		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;
 
 		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
+			};
 		}
 	};
 });

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)
+Released under the [MIT License](http://www.opensource.org/licenses/mit-license.php)

src/sticky-position.js

@@ -3,18 +3,21 @@ export default function({
 	placeholder = null,
 	wrapper = null,
 	computeWidth = true,
+	favorPolyfill = false,
 } = {}){
 	let top = null;
 	let isSticky = false;
 
-	const nativeSupport = (function(){		
+	const nativeSupport = (function(){
 		if (this.isSupported !== null) {
 			return this.isSupported;
-		} else {
+		} else if (!favorPolyfill) {
 			const style = document.createElement('test').style;
 			style.cssText = ['-webkit-', '-ms-', ''].map(prefix => `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,
 		};
 	}
-}
+}