Merge pull request #240 from OpenSourceOrg/fix/header-shrink-on-scroll-develop

Shrink the sticky header sooner, and stop it toggling in a loop

Author: mlaetitia

themes/osi/assets/js/build/theme.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '42979785231fcdbb3f33');
+<?php return array('dependencies' => array(), 'version' => 'e269384336004e90c6c8');

themes/osi/assets/js/build/theme.js

@@ -2,7 +2,7 @@
 Name: Header Resize
 Author: Marktime Media
 Author URI: http://marktimemedia.com
-Version: 0.2
+Version: 0.3
 License: GPLv2
 
  This program is free software; you can redistribute it and/or modify
@@ -18,63 +18,35 @@ License: GPLv2
  http://www.gnu.org/licenses/gpl-2.0.html
 */
 
-(function( $ ){
+const header = document.querySelector( '.header-main' );
 
-	/* Scroll Header */
+// The header is sticky but still in flow, so shrinking it lifts the page by 25px
+// ($headerInnerHeight 125px down to the 100px cap) and scroll anchoring corrects scrollY
+// to match. One threshold would be re-crossed by that correction and the class would
+// toggle in a loop, so the bound to beat depends on which state we are in. Growing back
+// only at 0 is the safe end: browsers suppress anchoring while the scroller sits at 0.
+const SHRINK_AT = 40;
+const GROW_AT = 0;
 
-	var $lastScrollTop = $(window).scrollTop(); // reset variable any time it reloads
-	var $siteHeader = $('.header-main'); // your header element
-	var $content = $('#content'); // content container
-	var $contentWithHeader = $('body #content:not(.has_no_sidebar)'); // content container
-	var changeDirection = -1; // base comparitive variable
-	var shrinkClass = 'header-main-small'; // your small header class
-	var paddingTop = $siteHeader.innerHeight();
-	var paddingTopPlus = ( $siteHeader.innerHeight() + 50 );
+if ( header ) {
+	let ticking = false;
 
-	// $content.css('padding-top', paddingTop);
-	// $contentWithHeader.css('padding-top', paddingTopPlus);
+	const update = () => {
+		ticking = false;
+		const isSmall = header.classList.contains( 'header-main-small' );
+		const next = window.scrollY > ( isSmall ? GROW_AT : SHRINK_AT );
 
-	$(window).on('scroll', (function(event) {
-		var $scrollPosition = $(this).scrollTop();
-
-		if($(window).width() > 784 ) { // we're mobile first so this is anything larger than our mobile breakpoint
-
-			if ($scrollPosition > 100) { // once you get far enough down, shrink the header
-
-		        $siteHeader.addClass(shrinkClass);
-
-		    } else { // bring it back up again when we get back to the top
-
-		    	$siteHeader.removeClass(shrinkClass);
-		    }
-
-		} else { // this is mobile breakpoint or smaller
-
-			if ($scrollPosition > 120 && $scrollPosition > $lastScrollTop) { // once you get far enough down, hide the header
-
-		    	changeDirection = -1; // reset changeDirection
-		        $siteHeader.addClass(shrinkClass);
-
-		    } else { // bring it back up again if we scroll up at all
-
-		    	if ( -1 == changeDirection) {
-		    		changeDirection = $scrollPosition; // only set changeDirection once
-		    	}
-
-		    	// console.log(changeDirection + ' ' + scrollPosition);
-
-		    	if ( $scrollPosition < (changeDirection - 100) ) { // only add after you've scrolled up a bit
-
-			    	$siteHeader.removeClass(shrinkClass);
-			    	changeDirection = -1; // reset changeDirection
-			    }
-
-		    }
-
-		    $lastScrollTop = $scrollPosition;
+		if ( next !== isSmall ) {
+			header.classList.toggle( 'header-main-small', next );
 		}
+	};
 
-	}));
-
+	window.addEventListener( 'scroll', () => {
+		if ( ! ticking ) {
+			ticking = true;
+			window.requestAnimationFrame( update );
+		}
+	}, { passive: true } );
 
-})( jQuery );
+	update(); // reloads restore scroll position before this runs
+}

themes/osi/assets/js/src/theme/header-resize.js

@@ -46,6 +46,7 @@ $maxPadding: 48px; // duplicates var(--wp--custom--spacing--max-padding)
 
 // header dimensions
 $headerInnerHeight: 125px; // .header--inner fixed height; admin-bar offsets come from core's --wp-admin--admin-bar--height
+$headerLogoHeight: 110px; // logo cap at rest; needs a length, not none, so the shrink can animate
 $mobileRowHeight: 34px; // mobile accordion row: the caret's 44px tap target centres its glyph on this
 $midPadding: 32px; // duplicates var(--wp--custom--spacing--mid-padding);
 $smallPadding: 16px; // duplicates var(--wp--custom--spacing--small-padding);

themes/osi/assets/scss/_1_settings.breakpoints.scss

@@ -22,9 +22,10 @@
     .header--inner {
         position: static;
         opacity: 1;
-        transition: all .3s;
+        transition: padding .3s, max-height .3s;
         z-index: 999;
         height: $headerInnerHeight;
+        max-height: $headerInnerHeight;
         display: flex;
         align-items: center;
         @media only screen and ( max-width: 1200px) {
@@ -37,7 +38,7 @@
         .header--blog-name {
             box-sizing: border-box;
             max-width: calc(100% - 130px);
-            max-height: 110px;
+            max-height: $headerLogoHeight;
             height: 100%;
             display: flex;
             align-items: center;
@@ -56,10 +57,11 @@
             img {
                 // all logos
                 max-width: 300px;
+                max-height: $headerLogoHeight;
                 height: auto;
                 width: auto;
                 transform: translateZ(0); // chrome blurry fix
-                transition: all .3s;
+                transition: max-height .3s;
                 @media only screen and (max-width: #{$break-small}) {
                     max-width: 180px;
                 }
@@ -116,7 +118,6 @@
     .header--inner {
         // opacity: 0;
         overflow: hidden;
-        transition: all .3s;
     }
     .header--blog-name {}
     .header--extra-text {