[BUGFIX] Fix sticky header flicker via CSS height compensation (alternative to #1618)

[CybotTM]

Problem

Same issue as #1618 — sticky navbar flickers during scroll transition in Chromium browsers (#1424, #1468).

Alternative approach: fix the root cause, not the symptom

PR #1618 fixes the symptom (scroll oscillation) by replacing the hardcoded JS threshold with a dynamic one. This PR fixes the root cause (document height instability) with a CSS-only approach.

Why the document height changes

.navbar-fixed-top uses position: sticky. When navbar-transition is added, --mainnavigation-nav-height drops from the responsive default (lg: 100px, xl: 110px) to 70px (xs). Since sticky elements remain in document flow, this shrinks the document by 30-40px, causing:

1. Scroll flicker — scrollY oscillates around the threshold
2. Scrollbar thumb jumps — scrollbar resizes as document height changes

Fix: compensate with margin-bottom

.navbar-transition {
    --mainnavigation-nav-height: #{map-get($navbar-heights, xs)};

    @each $breakpoint in map-keys($navbar-heights) {
        $default-height: map-get($navbar-heights, $breakpoint);
        $transition-height: map-get($navbar-heights, xs);
        @if $default-height != $transition-height {
            @include media-breakpoint-up($breakpoint) {
                margin-bottom: $default-height - $transition-height;
            }
        }
    }
}

Comparison with #1618

	#1618 (JS fix)	This PR (CSS fix)
Fixes flicker	Yes (hysteresis)	Yes (no height change)
Fixes scrollbar jump	No	Yes
Changes	JS only	SCSS only
Approach	Symptom (better threshold)	Root cause (stable document height)
Browser scope	Targets Chromium	All browsers
Auto-adapts to custom heights	Yes (dynamic)	Yes (computed from $navbar-heights)

Both PRs are valid. They can also be combined — the CSS fix prevents the root cause while the JS fix adds an extra safety margin. The maintainer can choose whichever approach fits best.

Running in production: https://typo3-demo.netresearch.de (CSS fix only, original stickyheader.js)

Resolves #1424
Resolves #1468

Prerequisites

• CSS has been rebuilt (cd Build; npm ci; npm run build) — SCSS change only, CSS rebuild needed