From a71b350ff6c9bf3bfac09f90daab2b4039cc9a0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 25 Apr 2024 16:03:29 +0200
Subject: [PATCH] MOBILE-4565 header: Check is still frozen after scrolling

---
 src/core/directives/collapsible-header.ts | 42 ++++++++++++++++++-----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts
index 704595af4..6b45337da 100644
--- a/src/core/directives/collapsible-header.ts
+++ b/src/core/directives/collapsible-header.ts
@@ -547,15 +547,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
                 return;
             }
 
-            const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight;
+            const frozen = this.isFrozen(contentScroll);
 
-            let frozen = false;
-            if (this.isWithinContent) {
-                frozen = scrollableHeight <= scrollingHeight;
-            } else {
-                const collapsedHeight = expandedHeaderHeight - (expandedHeader.clientHeight ?? 0);
-                frozen = scrollableHeight + collapsedHeight <= 2 * expandedHeaderHeight;
-            }
             const progress = frozen
                 ? 0
                 : CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1);
@@ -577,7 +570,14 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
                 }
 
                 if (page.classList.contains('collapsible-header-page-is-frozen')) {
-                    return;
+                    // Check it has to be frozen.
+                    const frozen = this.isFrozen(contentScroll);
+
+                    if (frozen) {
+                        return;
+                    }
+
+                    page.classList.toggle('collapsible-header-page-is-frozen', frozen);
                 }
 
                 const progress = parseFloat(page.style.getPropertyValue('--collapsible-header-progress'));
@@ -598,4 +598,28 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
         );
     }
 
+    /**
+     * Check if the header is frozen.
+     *
+     * @param contentScroll Content scroll element.
+     * @returns Whether the header is frozen or not.
+     */
+    protected isFrozen(contentScroll: HTMLElement): boolean {
+        const scrollingHeight = this.scrollingHeight ?? 0;
+        const expandedHeaderClientHeight = this.expandedHeader?.clientHeight ?? 0;
+        const expandedHeaderHeight = this.expandedHeaderHeight ?? 0;
+
+        const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight;
+
+        let frozen = false;
+        if (this.isWithinContent) {
+            frozen = scrollableHeight <= scrollingHeight;
+        } else {
+            const collapsedHeight = expandedHeaderHeight - (expandedHeaderClientHeight);
+            frozen = scrollableHeight + collapsedHeight <= 2 * expandedHeaderHeight;
+        }
+
+        return frozen;
+    }
+
 }