Fix: Sticky header with shrink overlaps content at scrollY=0#954
Open
Contributolo wants to merge 2 commits intostellarwp:masterfrom
Open
Fix: Sticky header with shrink overlaps content at scrollY=0#954Contributolo wants to merge 2 commits intostellarwp:masterfrom
Contributolo wants to merge 2 commits intostellarwp:masterfrom
Conversation
Fix: Sticky header with shrink overlaps content when scrolling back to top Problem When using an Advanced Header with Sticky + Shrink Main Row enabled (data-sticky="1", data-shrink-main="1"), scrolling down and then back to scrollY=0 causes the header to overlap approximately 80–90px of page content. Reproduction Create an Advanced Header with Sticky Header and Shrink Main Row (e.g. shrink height 80px) Load any page using this header Scroll down past the header trigger point (header shrinks and becomes fixed — works correctly) Scroll back to the top (scrollY=0) Bug: Header overlaps page content Root Cause Two timing issues in updateSticky(): 1. Placeholder height uses stale measurement — elHeight is read at line ~486 while the header row is still shrunk. The placeholder gets this stale value at line ~494. The shrink block then correctly restores the row height at line ~571, but the placeholder was already set too small. 2. isSticking is one frame behind — The position block at line ~597 uses the previous frame's isSticking value (still true). setStickyChanged(false) runs afterwards at line ~654, but since no further scroll event fires at scrollY=0, position: fixed persists. Combined: the header stays position: fixed at ~178px, but its placeholder is only ~88px — the 90px gap causes content overlap. Measured values Phase scrollY placeholder wrapper position ───────────── ─────── ─────────── ─────── ──────── Fresh load 0 170px 170px static ✓ Scrolled down 600 80px 88px fixed ✓ Back at top 0 88px 178px fixed ✗ BUG After fix 0 170px 170px static ✓ Fix Adds a correction block at the end of updateSticky() that runs after both the shrink logic and the class/position logic have completed. At scrollY === 0 with shrink enabled, it resets position to initial and re-measures the placeholder height from the now-restored wrapper. This is a minimal, non-breaking change — it only activates at the exact scroll position where the bug manifests and does not alter the existing control flow.
The initial fix reset position and re-measured placeholder height at scrollY=0 for all shrink-enabled headers. This caused a regression on pages using transparent + sticky + shrink headers (e.g. homepage with data-transparent="1"): the sticky background color persisted when scrolling back to the top instead of reverting to the transparent state. The fix now uses the same guard condition Kadence already applies for placeholder height on line ~493: ! isTransparent || hasStickySection. Transparent headers without a sticky section are skipped entirely, since they overlay content by design and don't use a sized placeholder.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix: Sticky header with shrink overlaps content when scrolling back to top
Problem
When using an Advanced Header with Sticky + Shrink Main Row enabled (
data-sticky="1",data-shrink-main="1"), scrolling down and then back toscrollY=0causes the header to overlap approximately 80–90px of page content.Reproduction
scrollY=0)Root Cause
Two timing issues in
updateSticky():1. Placeholder height uses stale measurement —
elHeightis read at line ~486 while the header row is still shrunk. The placeholder gets this stale value at line ~494. The shrink block then correctly restores the row height at line ~571, but the placeholder was already set too small.2.
isStickingis one frame behind — The position block at line ~597 uses the previous frame'sisStickingvalue (stilltrue).setStickyChanged(false)runs afterwards at line ~654, but since no further scroll event fires atscrollY=0,position: fixedpersists.Combined: the header stays
position: fixedat ~178px, but its placeholder is only ~88px — the 90px gap causes content overlap.Measured values
Fix
Adds a correction block at the end of
updateSticky()that runs after both the shrink logic and the class/position logic have completed. AtscrollY === 0with shrink enabled, it resets position toinitialand re-measures the placeholder height from the now-restored wrapper.The fix uses the same
! isTransparent || hasStickySectionguard condition already present on line ~493 for placeholder height. This ensures transparent headers (which overlay content by design and don't use a sized placeholder) are skipped entirely, preventing the sticky background from persisting when scrolling back to the top.This is a minimal, non-breaking change — it only activates at the exact scroll position where the bug manifests and does not alter the existing control flow.