Rockfield: Have sticky header only when it's maximum 1/5 of the screen height

rockfield/js/fixed-header-spacing.js

@@ -41,23 +41,21 @@
 	 * site-content when above mobile breakpoint
 	 */
 	function pageHeaderHeight() {
-		if ( document.documentElement.clientWidth <= 640 ) {
-
-			document.getElementById("primary").style.marginTop = 0;
+		var body = document.body;
 
+		if ( document.documentElement.clientWidth <= 640 ) {
+			document.getElementById( "primary" ).style.marginTop = 0;
+			body.classList.remove( 'wp-sticky-header' );
 		} else {
-			var body          = document.body;
-			var header        = document.getElementById("masthead");
-			var content       = document.getElementById("primary");
-			var archiveHeader = body.querySelector('.page-header');
+			var header  = document.getElementById( 'masthead' );
+			var content = document.getElementById( 'primary' );
 
-			if ( body.classList.contains("archive") ) {
-
-				content.style.marginTop = header.offsetHeight + "px";
+			content.style.marginTop = header.offsetHeight + "px";
 
+			if ( document.documentElement.clientHeight / 5 - header.offsetHeight >= 0 ) {
+				body.classList.add( 'wp-sticky-header' );
 			} else {
-
-				content.style.marginTop = header.offsetHeight + "px";
+				body.classList.remove( 'wp-sticky-header' );
 			}
 		}
 	};

rockfield/sass/_extra-child-theme.scss

@@ -57,7 +57,7 @@ a {
 		position: absolute;
 		right: 0;
 
-		body:not(.wp-custom-logo) & {
+		.wp-sticky-header & {
 			position: fixed;
 		}
 	}

rockfield/style-rtl.css

@@ -3431,7 +3431,7 @@ p:not(.site-title) a:hover {
 		position: absolute;
 		left: 0;
 	}
-	body:not(.wp-custom-logo) #masthead {
+	.wp-sticky-header #masthead {
 		position: fixed;
 	}
 }

rockfield/style.css

@@ -3436,7 +3436,7 @@ p:not(.site-title) a:hover {
 		position: absolute;
 		right: 0;
 	}
-	body:not(.wp-custom-logo) #masthead {
+	.wp-sticky-header #masthead {
 		position: fixed;
 	}
 }