Fix the header on scroll, in print and on AI pages

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

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

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

@@ -2,7 +2,7 @@
 Name: Header Resize
 Author: Marktime Media
 Author URI: http://marktimemedia.com
-Version: 0.2
+Version: 0.4
 License: GPLv2
 
  This program is free software; you can redistribute it and/or modify
@@ -18,63 +18,60 @@ License: GPLv2
  http://www.gnu.org/licenses/gpl-2.0.html
 */
 
-(function( $ ){
-
-	/* Scroll Header */
-
-	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 );
-
-	// $content.css('padding-top', paddingTop);
-	// $contentWithHeader.css('padding-top', paddingTopPlus);
-
-	$(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
-			    }
+const header = document.querySelector( '.header-main' );
+
+const SHRINK_AT = 40; // px scrolled before the header shrinks
+const MOBILE_SHRINK_AT = 120; // px scrolled before it shrinks on the direction-aware path
+const MOBILE_RESTORE_BY = 100; // px scrolled back up before it returns to full height
+const MOBILE_MAX_WIDTH = 784; // the width production switches paths at
+
+if ( header ) {
+	const narrow = window.matchMedia( `(max-width: ${ MOBILE_MAX_WIDTH }px)` );
+
+	let ticking = false;
+	let lastY = Math.max( 0, window.scrollY );
+	let turningPoint = -1; // top of the current upward scroll, -1 while scrolling down
+
+	const setSmall = ( small ) => header.classList.toggle( 'header-main-small', small );
+
+	const update = () => {
+		ticking = false;
+		const y = Math.max( 0, window.scrollY ); // rubber-band overscroll reports negative
+
+		if ( narrow.matches ) {
+			// narrow screens follow the scroll direction, so the full header comes back part-way
+			// down the page rather than only at the top (@see T51ENG-2081)
+			if ( y > MOBILE_SHRINK_AT && y > lastY ) {
+				turningPoint = -1;
+				setSmall( true );
+			} else {
+				if ( -1 === turningPoint ) {
+					// the peak, not where this frame landed: one frame can swallow a whole flick
+					turningPoint = Math.max( lastY, y );
+				}
+
+				if ( y <= MOBILE_SHRINK_AT || y < turningPoint - MOBILE_RESTORE_BY ) {
+					turningPoint = -1;
+					setSmall( false );
+				}
+			}
+		} else {
+			turningPoint = -1; // or a peak latched while narrow outlives a rotation
+			setSmall( y > SHRINK_AT );
+		}
 
-		    }
+		lastY = y;
+	};
 
-		    $lastScrollTop = $scrollPosition;
+	window.addEventListener( 'scroll', () => {
+		if ( ! ticking ) {
+			ticking = true;
+			window.requestAnimationFrame( update );
 		}
+	}, { passive: true } );
 
-	}));
-
+	// the two paths disagree, so crossing the width mid-page has to re-decide
+	narrow.addEventListener( 'change', update );
 
-})( jQuery );
+	update(); // reloads restore scroll position before this runs
+}

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

@@ -45,7 +45,13 @@ $wrapperPad: 5vw; // duplicates the production Customizer CSS inset on body > .w
 $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
+$headerInnerHeight: 125px; // .header--inner at rest; also the spacer that holds its place in the flow
+$headerInnerHeightSmall: 90px; // .header--inner once scrolled
+$headerLogoWidth: 300px; // logo column width, held constant so the nav never reflows
+$headerLogoHeight: 110px; // logo cap at rest; needs a length, not none, so the shrink can animate
+$headerLogoHeightSmall: 60px; // logo cap once scrolled
+$navPad: 2.1rem; // .nav-main vertical padding at rest
+$navPadSmall: .55rem; // .nav-main vertical padding once scrolled
 $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/_6_components.header.scss

@@ -1,33 +1,36 @@
 .header-main {
-    // position:fixed; // for header scroll
-    position: sticky;
+    position: fixed;
     top: 0;
-    width: 100%;
+    left: 0;
+    right: 0;
     z-index: 999;
     .button a {
         color: inherit;
     }
 }
 
-.admin-bar {
-    .header-main.header-main-small {
-        top: 32px;
-        @media only screen and (max-width: 782px) {
-            top: 46px;
-        }
-    }
+.header--spacer {
+    height: $headerInnerHeight;
+}
+
+html {
+    scroll-padding-top: calc(#{$headerInnerHeight} + var(--wp-admin--admin-bar--height, 0px));
+}
+
+.admin-bar .header-main {
+    top: var(--wp-admin--admin-bar--height, 32px);
 }
 
 .header-main {
     .header--inner {
         position: static;
         opacity: 1;
-        transition: all .3s;
         z-index: 999;
         height: $headerInnerHeight;
         display: flex;
         align-items: center;
-        @media only screen and ( max-width: 1200px) {
+        transition: height .3s;
+        @media only screen and (max-width: #{$break-nav - 0.06}) {
             background: #fff;
             padding: 16px;
         }
@@ -37,7 +40,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;
@@ -55,11 +58,12 @@
             }
             img {
                 // all logos
-                max-width: 300px;
+                max-width: $headerLogoWidth;
+                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;
                 }
@@ -74,13 +78,10 @@
     }
     &.header-main-small {
         .header--inner {
-            padding-top: 16px;
-            padding-bottom: 16px;
-            max-height: 100px;
             .header--blog-name {
                 a {
                     img {
-                        max-height: 60px;
+                        max-height: $headerLogoHeightSmall;
                     }
                 }
             }
@@ -113,38 +114,37 @@
         overflow: hidden;
         transition: all .3s;
     }
-    .header--inner {
-        // opacity: 0;
-        overflow: hidden;
-        transition: all .3s;
-    }
-    .header--blog-name {}
     .header--extra-text {
         display: none;
     }
 }
 
-@media only screen and (max-width: #{$break-nav}) {
-    .header-main-small {
-        .header--blog-name img {
-            max-height: 67.19px;
-        }
-    }
-}
-
 @media only screen and (min-width: #{$break-nav}) {
-    .header--inner,
     .header--quicklinks-inner {
         // @include clearfix();
         padding-left: $maxPadding;
         padding-right: $maxPadding;
-        padding-top: 1em;
     }
     .header--inner {
         border: 0;
         position: relative;
+        padding-left: calc(#{$wrapperPad} + #{$maxPadding});
+        padding-right: calc(#{$wrapperPad} + #{$maxPadding});
+    }
+    .header-main-small {
+        .header--inner {
+            height: $headerInnerHeightSmall;
+        }
+        .nav-main {
+            padding-bottom: $navPadSmall;
+            padding-top: $navPadSmall;
+        }
     }
     .header--blog-name {
+        // hold the column at full-logo width: letting it shrink with the logo hands the
+        // nav that width and the menu reflows from two rows to one
+        flex-shrink: 0;
+        width: $headerLogoWidth;
         .hide-mobile {
             display: inline-block;
         }
@@ -158,17 +158,22 @@
         clear: right;
         padding: 0;
     }
-    // open-panel layers: full-bleed white veil (::after escapes the wrapper inset) and
-    // page dim; z-index -1 keeps both under content, tree order paints veil over dim
-    @mixin nav-open-layers {
+    @mixin header-white-veil( $border: false ) {
         &::after {
             background-color: $Nwhite;
-            border-bottom: 1px solid $Nlight;
+            @if $border {
+                border-bottom: 1px solid $Nlight;
+            }
             content: '';
-            inset: 0 (-$wrapperPad);
+            inset: 0;
             position: absolute;
             z-index: -1;
         }
+    }
+    // open-panel layers: the white veil plus a page dim; z-index -1 keeps both under
+    // content, tree order paints veil over dim
+    @mixin nav-open-layers {
+        @include header-white-veil( true );
         &::before {
             background: rgba(0, 0, 0, .35);
             content: '';
@@ -186,19 +191,10 @@
     .header-main:has(.menu-item.megamenu:hover:not(.is-dismissed)) {
         @include nav-open-layers;
     }
+    // one class on purpose: raising this above .header-main.is-nav-open would win the
+    // source-order tie and drop the open panel's bottom border
     .header-main-small {
-        background-color: $Nwhite;
-        .nav-main {
-            height: auto;
-            top: 0;
-            // transition: all .2s;
-            margin-top: 0;
-            .nav-main--menu>.menu-item>a {
-                padding-top: 0.6em;
-                padding-bottom: 0.5em;
-                transition: all .3s;
-            }
-        }
+        @include header-white-veil;
     }
 }
 
@@ -210,3 +206,15 @@
         align-items: center;
     }
 }
+
+@media print {
+    .header-main {
+        position: static;
+    }
+    .header--spacer,
+    .nav-main,
+    .open-button-wrapper,
+    .open-search-wrapper {
+        display: none;
+    }
+}

themes/osi/assets/scss/_6_components.navigation--subnav.scss

@@ -420,13 +420,13 @@ $chevronDown: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/sv
         display: grid;
         gap: 0 2.5rem;
         grid-template-columns: repeat(2, minmax(0, 1fr));
-        left: -$wrapperPad;
+        left: 0;
         max-height: none;
         max-width: none;
         overflow: visible;
         opacity: 0;
         padding: 2rem calc(#{$wrapperPad} + #{$maxPadding}) 2.5rem;
-        right: -$wrapperPad;
+        right: 0;
         text-align: left;
         top: 100%;
         transform: translateY(8px);