KAD-5487 Advanced Headers - Sticky Headers have a height rendering issue when shrinking the middle row is enabled

[coutinhocouto]

🎫 #KAD-5487

🗒️ Description

Fix (bug fix - sticky header shrink overlap)
Fixed the sticky header with shrink middle row causing content overlap (~90px) when scrolling back to the top of the page.

Changes in src/assets/js/kb-header-block.js and includes/assets/js/kb-header-block.min.js:

Added a correction block at the end of updateSticky() that runs after both the shrink and class/position logic have completed. At scrollY === 0 with shrink enabled, it:

1. Resets position, width, left, top to initial when isSticking is false — fixing the issue where position: fixed persisted because setStickyChanged(false) ran too late and no further scroll event fired at scrollY === 0.
2. Re-measures the placeholder height from the now-restored (unshrunk) wrapper — fixing the stale elHeight measurement that was read before the shrink block restored the row to full height.

Uses the same isTransparent / hasStickySection guard conditions already present in the function, so transparent headers without a sticky section are correctly skipped.

Root cause: Two timing issues in updateSticky():

• elHeight was measured while the header row was still at its shrunk size, giving the placeholder a stale (too small) value.
• isSticking was applied one frame behind — the position block used the previous frame's value (true), and since no further scroll event fires at scrollY === 0, position: fixed persisted.

🧪 Testing Instructions for QA

1. Create an Advanced Header in the block editor.
2. Give the Middle Row a min-height of 100px.
3. Enable Sticky Header and enable the Shrink Middle Row option.
4. Set the shrink value to something like 60px.
5. Apply the Advanced Header to the theme and go to the homepage.
6. Scroll down past the header trigger point (header shrinks and becomes fixed — this should work correctly).
7. Scroll back up to the top of the page.
8. Verify: The header returns to its full unshrunk height with no content overlap or gap.
9. Repeat scrolling down and up multiple times — verify no bouncing, shifting, or height rendering issues.
10. Test with a transparent header + sticky + shrink — verify no white background appears at the top.
11. Test with a non-shrink sticky header — verify it still works correctly (no regression).

Checklist

• I have performed a self-review.
• No unrelated files are modified.
• No debugging statements exist (Ex: console.log, error_log).
• There are no warnings or notices in the wordpress error log.
• Passes all tests (linting, acceptance, & unit)

Block specific checklist (where relevant)

• Tested with an existing instance of this block.
• Tested creating a new instance of this block.
• Tested with Dynamic content & Elements.

[github-actions]

🎉 Zip build complete

• 💾 Download zip
• 🛝 Test in WordPress Playground