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

The header shrank only after 100px of scrolling, and a single threshold meant
the 25px the page lifts on shrinking could be handed back by scroll anchoring,
re-crossing the bound and toggling the class repeatedly. The threshold to beat
now depends on which state the header is in, so no correction can reach the
other bound, and the handler runs once per animation frame on a passive
listener. Mobile and desktop share one path; the mobile header no longer grows
back mid-page on an upward scroll.

max-height had no length to animate from, so the shrink snapped rather than
eased; the base rules now set one, and the transitions name the properties that
actually change.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011rCHPCdbV5C5dDJjEmMDuy

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 {