affixing-header - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

dist/affixing-header-bundled-min.js

@@ -1,1 +0,1 @@
-(function(e,t){typeof exports==="object"&&typeof module!=="undefined"?module.exports=t():typeof define==="function"&&define.amd?define(t):e.affixingHeader=t()})(this,function(){"use strict";"use strict";var e=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,t=e!==undefined,n=false,i=false,f=window.pageYOffset,o=window.pageXOffset,s=f,u=o,l=["x","horizontal"],r=["any"],a={x:[],y:[],any:[]};function d(){var e;if(f!==s){for(e=0;e<a.y.length;e++){a.y[e](f)}s=f}if(o!==u){for(e=0;e<a.x.length;e++){a.x[e](o)}u=o}for(e=0;e<a.any.length;e++){a.any[e]([o,f])}i=false}function c(){if(!i){e(d)}i=true}function p(){if(a.x.length||a.any.length){o=window.pageXOffset}if(a.y.length||a.any.length){f=window.pageYOffset}c()}function y(e,i){if(!t){return}if(!n){window.addEventListener("scroll",p);document.body.addEventListener("touchmove",p);n=true}if(typeof e==="function"){i=e;a.y.push(i);return}if(typeof i==="function"){if(~l.indexOf(e)){a.x.push(i)}else if(~r.indexOf(e)){a.any.push(i)}else{a.y.push(i)}}}y.remove=function(e,t){var n="y",i,f;if(typeof e==="string"){if(typeof t!=="function"){return}if(~l.indexOf(e)){n=l[0]}else if(~r.indexOf(e)){n=r[0]}}else{t=e}i=a[n];f=i.indexOf(t);if(f>-1){i.splice(f,1)}};y.off=y.remove;var m=y;"use strict";var h=0,g=0,w=0,x=false,v=false,O;function H(){x=true;v=false;O.style.top=0;O.style.position="fixed"}function b(){if(!x){return}w=0;x=false;if(!v){if(g>h+O.clientHeight+5){O.style.top=h+5+"px"}else{O.style.top=g+"px"}}else{v=false}O.style.position="absolute"}function E(){if(!x&&O.offsetTop>g){H()}}function q(e){g=e;E();if(g<0||document.documentElement.scrollHeight-document.documentElement.scrollTop<document.documentElement.clientHeight){return}if(g<h){if(!x&&g+O.clientHeight+10<h||v&&g<=O.offsetTop+2){H()}else if(!x){if(w>6){x=true;if(g>O.offsetTop+O.clientHeight+5){O.style.top=g-O.clientHeight+"px"}v=true}w++}}else if(x){b()}h=g}var A=function(e){if(!e){return}O=e;O.style.top=0;O.style.position="absolute";m(q)};return A});
+(function(e,t){typeof exports==="object"&&typeof module!=="undefined"?module.exports=t():typeof define==="function"&&define.amd?define(t):e.affixingHeader=t()})(this,function(){"use strict";"use strict";var e=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,t=e!==undefined,i=false,n=false,o=window.pageYOffset,f=window.pageXOffset,s=o,l=f,u=["x","horizontal"],r=["any"],a={x:[],y:[],any:[]};function d(){var e;if(o!==s){for(e=0;e<a.y.length;e++){a.y[e](o)}s=o}if(f!==l){for(e=0;e<a.x.length;e++){a.x[e](f)}l=f}for(e=0;e<a.any.length;e++){a.any[e]([f,o])}n=false}function c(){if(!n){e(d)}n=true}function p(){if(a.x.length||a.any.length){f=window.pageXOffset}if(a.y.length||a.any.length){o=window.pageYOffset}c()}function h(e,n){if(!t){return}if(!i){window.addEventListener("scroll",p);document.body.addEventListener("touchmove",p);i=true}if(typeof e==="function"){n=e;a.y.push(n);return}if(typeof n==="function"){if(~u.indexOf(e)){a.x.push(n)}else if(~r.indexOf(e)){a.any.push(n)}else{a.y.push(n)}}}h.remove=function(e,t){var i="y",n,o;if(typeof e==="string"){if(typeof t!=="function"){return}if(~u.indexOf(e)){i=u[0]}else if(~r.indexOf(e)){i=r[0]}}else{t=e}n=a[i];o=n.indexOf(t);if(o>-1){n.splice(o,1)}};h.off=h.remove;var y=h;"use strict";var m=0,g=0,w=0,x=false,v=false,H={},O={},E,b;function T(){x=true;v=false;E.style.position="fixed";E.style.top="0px";O.top=0}function q(){var e=false;if(!x){return}w=0;x=false;if(!v){if(g>m+O.height+5){e=m+5}else{e=g}}else{v=false}if(e!==false){E.style.top=e+"px";O.top=e}E.style.position="absolute"}function A(){if(!x&&O.top>g){T()}}function F(e){g=e;A();if(g<0||H.scrollHeight-H.scrollTop<H.clientHeight){return}if(g<m){if(!x&&g+O.height+10<m||v&&g<=O.top+2){T()}else if(!x&&!v){if(w>6){x=true;O.height=E.offsetHeight;if(g>O.top+O.height+25){O.top=g-O.height-25;E.style.top=O.top+"px"}v=true}w++}}else if(x){q()}m=g}function z(){H.clientHeight=document.documentElement.clientHeight;H.scrollHeight=document.documentElement.scrollHeight;H.scrollTop=document.documentElement.scrollTop;O.height=E.offsetHeight}function L(){if(b){window.clearTimeout(b)}window.setTimeout(z,150)}var R=function(e){if(!e){return}E=e;E.style.position="absolute";E.style.top="0px";O.top=0;z();window.addEventListener("resize",L);y(F)};return R});

dist/affixing-header-bundled.js

@@ -135,6 +135,8 @@ (function (global, factory) {
         upScrollCount      = 0,
-        //downScrollCount    = 0,
         isNavAffixed       = false,
         isNavTransitioning = false,
-        header;
+        documentDimensions = {},
+        headerDimensions   = {},
+        header,
+        resizeTimeoutId;
 
@@ -144,7 +146,9 @@ function affixNavBar() {
         isNavTransitioning    = false;
-        header.style.top      = 0;
         header.style.position = 'fixed';
+        header.style.top      = '0px';
+        headerDimensions.top  = 0;
     }
 
     function unAffixNavBar() {
+        var newHeaderTop = false;
     	if (!isNavAffixed) {
@@ -154,11 +158,11 @@ // Nothing to do here
     	}
-    	upScrollCount = 0;
-    	isNavAffixed = false;
+        upScrollCount = 0;
+        isNavAffixed  = false;
     	// Only set top position for switch from fixed absolute if not transitioning
     	if (!isNavTransitioning) {
     		// If user jumped down the page (e.g. paging with spacebar)
-    		if (affixing_header__scrollY > scrollYPrev + header.clientHeight + 5) {
-    			header.style.top = scrollYPrev + 5 + 'px';
+    		if (affixing_header__scrollY > scrollYPrev + headerDimensions.height + 5) {
+                newHeaderTop = scrollYPrev + 5;
     		} else {
-    			header.style.top = affixing_header__scrollY + 'px';
+    			newHeaderTop = affixing_header__scrollY;
     		}
@@ -168,2 +172,6 @@ } else {
     	}
+        if (newHeaderTop !== false) {
+            header.style.top     = newHeaderTop + 'px';
+            headerDimensions.top = newHeaderTop;
+        }
     	header.style.position = 'absolute';
@@ -173,3 +181,3 @@ }
     function checkNavPosition() {
-    	if (!isNavAffixed && header.offsetTop > affixing_header__scrollY) {
+    	if (!isNavAffixed && headerDimensions.top > affixing_header__scrollY) {
     		affixNavBar();
@@ -186,3 +194,3 @@ }
         //(scrollY + window.innerHeight) > document.documentElement.scrollHeight
-    	if (affixing_header__scrollY < 0 || document.documentElement.scrollHeight - document.documentElement.scrollTop < document.documentElement.clientHeight) {
+    	if (affixing_header__scrollY < 0 || documentDimensions.scrollHeight - documentDimensions.scrollTop < documentDimensions.clientHeight) {
     		return;
@@ -193,11 +201,13 @@ }
     		// Or we are transitioning and have reached the top of the bar
-    		if ((!isNavAffixed && affixing_header__scrollY + header.clientHeight + 10 < scrollYPrev) || (isNavTransitioning && affixing_header__scrollY <= header.offsetTop + 2)) {
+    		if ((!isNavAffixed && affixing_header__scrollY + headerDimensions.height + 10 < scrollYPrev) || isNavTransitioning && affixing_header__scrollY <= headerDimensions.top + 2) {
     			affixNavBar();
-    		} else if (!isNavAffixed) {
+    		} else if (!isNavAffixed && !isNavTransitioning) {
     			if (upScrollCount > 6) {
-    				//downScrollCount = 0;
     				isNavAffixed = true;
+                    // Need header height, so update cached dimensions
+                    headerDimensions.height = header.offsetHeight;
     				// If the navbar is not currently visible, set the top to just above the viewport so it appears as we scroll up
-    				if (affixing_header__scrollY > header.offsetTop + header.clientHeight + 5) {
-    					header.style.top = (affixing_header__scrollY - header.clientHeight) + 'px';
+    				if (affixing_header__scrollY > headerDimensions.top + headerDimensions.height + 25) {
+                        headerDimensions.top = affixing_header__scrollY - headerDimensions.height - 25;
+                        header.style.top     = headerDimensions.top + 'px';
     				}
@@ -214,2 +224,16 @@ isNavTransitioning = true;
 
+    function calculateDimensions() {
+        documentDimensions.clientHeight = document.documentElement.clientHeight;
+        documentDimensions.scrollHeight = document.documentElement.scrollHeight;
+        documentDimensions.scrollTop    = document.documentElement.scrollTop;
+        headerDimensions.height         = header.offsetHeight;
+    }
+
+    function onResizeDebouncer() {
+        if (resizeTimeoutId) {
+            window.clearTimeout(resizeTimeoutId);
+        }
+        window.setTimeout(calculateDimensions, 150);
+    }
+
     var affixing_header = function(navElement) {
@@ -220,5 +244,9 @@ if (!navElement) {
         // Set initial state
-    	header                = navElement;
-        header.style.top      = 0;
+        header                = navElement;
         header.style.position = 'absolute';
+        header.style.top      = '0px';
+        headerDimensions.top  = 0;
+        // Trigger calculations caching and attach debouncer to resize event
+        calculateDimensions();
+        window.addEventListener('resize', onResizeDebouncer);
         // Use onscrolling helper to listen for scroll changes
@@ -225,0 +253,0 @@ _onscrolling(affixing_header__handleScroll);

dist/affixing-header.js

@@ -12,6 +12,8 @@ (function (global, factory) {
 	    upScrollCount      = 0,
-	    //downScrollCount    = 0,
 	    isNavAffixed       = false,
 	    isNavTransitioning = false,
-	    header;
+	    documentDimensions = {},
+	    headerDimensions   = {},
+	    header,
+	    resizeTimeoutId;
 
@@ -21,7 +23,9 @@ function affixNavBar() {
 	    isNavTransitioning    = false;
-	    header.style.top      = 0;
 	    header.style.position = 'fixed';
+	    header.style.top      = '0px';
+	    headerDimensions.top  = 0;
 	}
 
 	function unAffixNavBar() {
+	    var newHeaderTop = false;
 		if (!isNavAffixed) {
@@ -31,11 +35,11 @@ // Nothing to do here
 		}
-		upScrollCount = 0;
-		isNavAffixed = false;
+	    upScrollCount = 0;
+	    isNavAffixed  = false;
 		// Only set top position for switch from fixed absolute if not transitioning
 		if (!isNavTransitioning) {
 			// If user jumped down the page (e.g. paging with spacebar)
-			if (scrollY > scrollYPrev + header.clientHeight + 5) {
-				header.style.top = scrollYPrev + 5 + 'px';
+			if (scrollY > scrollYPrev + headerDimensions.height + 5) {
+	            newHeaderTop = scrollYPrev + 5;
 			} else {
-				header.style.top = scrollY + 'px';
+				newHeaderTop = scrollY;
 			}
@@ -45,2 +49,6 @@ } else {
 		}
+	    if (newHeaderTop !== false) {
+	        header.style.top     = newHeaderTop + 'px';
+	        headerDimensions.top = newHeaderTop;
+	    }
 		header.style.position = 'absolute';
@@ -50,3 +58,3 @@ }
 	function checkNavPosition() {
-		if (!isNavAffixed && header.offsetTop > scrollY) {
+		if (!isNavAffixed && headerDimensions.top > scrollY) {
 			affixNavBar();
@@ -63,3 +71,3 @@ }
 	    //(scrollY + window.innerHeight) > document.documentElement.scrollHeight
-		if (scrollY < 0 || document.documentElement.scrollHeight - document.documentElement.scrollTop < document.documentElement.clientHeight) {
+		if (scrollY < 0 || documentDimensions.scrollHeight - documentDimensions.scrollTop < documentDimensions.clientHeight) {
 			return;
@@ -70,11 +78,13 @@ }
 			// Or we are transitioning and have reached the top of the bar
-			if ((!isNavAffixed && scrollY + header.clientHeight + 10 < scrollYPrev) || (isNavTransitioning && scrollY <= header.offsetTop + 2)) {
+			if ((!isNavAffixed && scrollY + headerDimensions.height + 10 < scrollYPrev) || isNavTransitioning && scrollY <= headerDimensions.top + 2) {
 				affixNavBar();
-			} else if (!isNavAffixed) {
+			} else if (!isNavAffixed && !isNavTransitioning) {
 				if (upScrollCount > 6) {
-					//downScrollCount = 0;
 					isNavAffixed = true;
+	                // Need header height, so update cached dimensions
+	                headerDimensions.height = header.offsetHeight;
 					// If the navbar is not currently visible, set the top to just above the viewport so it appears as we scroll up
-					if (scrollY > header.offsetTop + header.clientHeight + 5) {
-						header.style.top = (scrollY - header.clientHeight) + 'px';
+					if (scrollY > headerDimensions.top + headerDimensions.height + 25) {
+	                    headerDimensions.top = scrollY - headerDimensions.height - 25;
+	                    header.style.top     = headerDimensions.top + 'px';
 					}
@@ -91,2 +101,16 @@ isNavTransitioning = true;
 
+	function calculateDimensions() {
+	    documentDimensions.clientHeight = document.documentElement.clientHeight;
+	    documentDimensions.scrollHeight = document.documentElement.scrollHeight;
+	    documentDimensions.scrollTop    = document.documentElement.scrollTop;
+	    headerDimensions.height         = header.offsetHeight;
+	}
+
+	function onResizeDebouncer() {
+	    if (resizeTimeoutId) {
+	        window.clearTimeout(resizeTimeoutId);
+	    }
+	    window.setTimeout(calculateDimensions, 150);
+	}
+
 	return function(navElement) {
@@ -97,5 +121,9 @@ if (!navElement) {
 	    // Set initial state
-		header                = navElement;
-	    header.style.top      = 0;
+	    header                = navElement;
 	    header.style.position = 'absolute';
+	    header.style.top      = '0px';
+	    headerDimensions.top  = 0;
+	    // Trigger calculations caching and attach debouncer to resize event
+	    calculateDimensions();
+	    window.addEventListener('resize', onResizeDebouncer);
 	    // Use onscrolling helper to listen for scroll changes
@@ -102,0 +130,0 @@ onscrolling(handleScroll);

package.json

 {
   "name": "affixing-header",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "An affixing header that behaves normally as a user navigates down a page, but reveals itself naturally when a user scrolls or drags upwards. Inspired by iOS Safari, Medium, and others.",
   "main": "dist/affixing-header.js",
+  "jsnext:main": "src/affixing-header.js",
   "scripts": {
@@ -7,0 +8,0 @@ "test": "npm run build && npm run lint:tests && node test/bootstrap.js",

README.md

@@ -14,5 +14,5 @@ # Affixing Header  [![Build Status](https://travis-ci.org/acusti/affixing-header.svg?branch=master)](https://travis-ci.org/acusti/affixing-header)
 3. As the `window.affixingHeader` global with dependencies bundled in: `dist/affixing-header-bundled.js`, or minified as `dist/affixing-header-bundled-min.js`
-4. As an ES6/ES2015 module, compatible with ES6-compatible module loaders like [SystemJS][] or compilers like [Babel][]: `src/affixing-header.js`
+4. As an ES6/ES2015 module (identified by `jsnext:main` in package.json), compatible with ES6-compatible module loaders like [SystemJS][] or compilers like [Babel][]: `src/affixing-header.js`
 
-It exports a single function via `require('affixing-header')` if being used with a CommonJS or AMD module loader, or else exposes the function as a global named `window.affixingHeader`.
+Exports a single function via `require('affixing-header')` if being used with a CommonJS or AMD module loader, or else exposes the function as a global named `window.affixingHeader`.
 
@@ -19,0 +19,0 @@ ### `affixingHeader( element )`

src/affixing-header.js

@@ -13,6 +13,8 @@ 'use strict';
     upScrollCount      = 0,
-    //downScrollCount    = 0,
     isNavAffixed       = false,
     isNavTransitioning = false,
-    header;
+    documentDimensions = {},
+    headerDimensions   = {},
+    header,
+    resizeTimeoutId;
 
@@ -22,7 +24,9 @@ function affixNavBar() {
     isNavTransitioning    = false;
-    header.style.top      = 0;
     header.style.position = 'fixed';
+    header.style.top      = '0px';
+    headerDimensions.top  = 0;
 }
 
 function unAffixNavBar() {
+    var newHeaderTop = false;
 	if (!isNavAffixed) {
@@ -32,11 +36,11 @@ // Nothing to do here
 	}
-	upScrollCount = 0;
-	isNavAffixed = false;
+    upScrollCount = 0;
+    isNavAffixed  = false;
 	// Only set top position for switch from fixed absolute if not transitioning
 	if (!isNavTransitioning) {
 		// If user jumped down the page (e.g. paging with spacebar)
-		if (scrollY > scrollYPrev + header.clientHeight + 5) {
-			header.style.top = scrollYPrev + 5 + 'px';
+		if (scrollY > scrollYPrev + headerDimensions.height + 5) {
+            newHeaderTop = scrollYPrev + 5;
 		} else {
-			header.style.top = scrollY + 'px';
+			newHeaderTop = scrollY;
 		}
@@ -46,2 +50,6 @@ } else {
 	}
+    if (newHeaderTop !== false) {
+        header.style.top     = newHeaderTop + 'px';
+        headerDimensions.top = newHeaderTop;
+    }
 	header.style.position = 'absolute';
@@ -51,3 +59,3 @@ }
 function checkNavPosition() {
-	if (!isNavAffixed && header.offsetTop > scrollY) {
+	if (!isNavAffixed && headerDimensions.top > scrollY) {
 		affixNavBar();
@@ -64,3 +72,3 @@ }
     //(scrollY + window.innerHeight) > document.documentElement.scrollHeight
-	if (scrollY < 0 || document.documentElement.scrollHeight - document.documentElement.scrollTop < document.documentElement.clientHeight) {
+	if (scrollY < 0 || documentDimensions.scrollHeight - documentDimensions.scrollTop < documentDimensions.clientHeight) {
 		return;
@@ -71,11 +79,13 @@ }
 		// Or we are transitioning and have reached the top of the bar
-		if ((!isNavAffixed && scrollY + header.clientHeight + 10 < scrollYPrev) || (isNavTransitioning && scrollY <= header.offsetTop + 2)) {
+		if ((!isNavAffixed && scrollY + headerDimensions.height + 10 < scrollYPrev) || isNavTransitioning && scrollY <= headerDimensions.top + 2) {
 			affixNavBar();
-		} else if (!isNavAffixed) {
+		} else if (!isNavAffixed && !isNavTransitioning) {
 			if (upScrollCount > 6) {
-				//downScrollCount = 0;
 				isNavAffixed = true;
+                // Need header height, so update cached dimensions
+                headerDimensions.height = header.offsetHeight;
 				// If the navbar is not currently visible, set the top to just above the viewport so it appears as we scroll up
-				if (scrollY > header.offsetTop + header.clientHeight + 5) {
-					header.style.top = (scrollY - header.clientHeight) + 'px';
+				if (scrollY > headerDimensions.top + headerDimensions.height + 25) {
+                    headerDimensions.top = scrollY - headerDimensions.height - 25;
+                    header.style.top     = headerDimensions.top + 'px';
 				}
@@ -92,2 +102,16 @@ isNavTransitioning = true;
 
+function calculateDimensions() {
+    documentDimensions.clientHeight = document.documentElement.clientHeight;
+    documentDimensions.scrollHeight = document.documentElement.scrollHeight;
+    documentDimensions.scrollTop    = document.documentElement.scrollTop;
+    headerDimensions.height         = header.offsetHeight;
+}
+
+function onResizeDebouncer() {
+    if (resizeTimeoutId) {
+        window.clearTimeout(resizeTimeoutId);
+    }
+    window.setTimeout(calculateDimensions, 150);
+}
+
 export default function(navElement) {
@@ -98,7 +122,11 @@ if (!navElement) {
     // Set initial state
-	header                = navElement;
-    header.style.top      = 0;
+    header                = navElement;
     header.style.position = 'absolute';
+    header.style.top      = '0px';
+    headerDimensions.top  = 0;
+    // Trigger calculations caching and attach debouncer to resize event
+    calculateDimensions();
+    window.addEventListener('resize', onResizeDebouncer);
     // Use onscrolling helper to listen for scroll changes
 	onscrolling(handleScroll);
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49207

increased by8.73%

Lines of code

790

increased by10.96%

No dependency changes