Belgrade offcanvas nav keeps top-bar offset after scroll, leaving empty gap

The gap happens because top and margin-top on the offcanvas are always set to var(--beo-region-top-bar-height), even when the top-bar has scrolled out of view.

Added an IntersectionObserver in main.js that tracks the top-bar visibility and updates a new --beo-region-top-bar-offset variable — 3.5rem when visible, 0px when not. CSS uses it with fallback to --beo-region-top-bar-height so nothing breaks without JS.

Thanks @majmunbog for the review!

Renamed --beo-region-top-bar-offset to --beo-navigation-region-offset as suggested.

Regarding padding — the issue is the offcanvas position, not its inner spacing. margin-top pushes the entire panel down, leaving a visible gap. Padding would only shift the content inside while the gap remains. The IntersectionObserver approach dynamically updates the offset based on top-bar visibility.

Testing the MR and offcanvas panel is now jumping on scroll.

When the user scrolls with the off-canvas panel open, the panel abruptly shifts upward to occupy the space previously taken by the top bar. The repositioning is visible as a noticeable "jump" rather than a smooth transition. Same jump happens when we scroll back up to position where top bar is visible.

The off-canvas panel should adjust its position seamlessly when the top bar scrolls in and out of view, without a visible jump.

Thanks @sumi for testing and the clear report.

The jump was caused by the IntersectionObserver with threshold: 0: it only fires when the last pixel of the top bar enters or leaves the viewport, so --beo-navigation-region-offset flipped instantly between var(--beo-region-top-bar-height) (3.5rem) and 0px. That single 3.5rem step is the visible jump — both scrolling down and back up.

Reworked the behavior to track the top bar continuously instead of as a binary state. On scroll (throttled with requestAnimationFrame) it sets the offset to the height of the top bar still visible in the viewport:

const visible = Math.min(
  Math.max(topBar.getBoundingClientRect().bottom, 0),
  topBar.offsetHeight
);
root.style.setProperty('--beo-navigation-region-offset', `${visible}px`);

Because the offset now follows the top bar's position pixel-by-pixel, the navigation region slides up in lock-step with the top bar and settles at 0px exactly when the bar is gone — no jump in either direction. The Bootstrap show/hidden handlers are no longer needed: the panel opens with whatever offset the last scroll frame set, which is already correct.

CSS/SCSS are unchanged — the var(--beo-navigation-region-offset, var(--beo-region-top-bar-height)) fallback still degrades gracefully without JS.

Tested the latest changes in the MR and there is no longer "jump" on scroll that we had previously but now when we scroll and off-canvas moves up to take space of the top bar on the bottom of the page we are left with a gap in same size as the top-bar for which off-canvas moved up.

Off-canvas should always be full height of the screen and we should not have a gap between the off-canvas and the bottom of the page.

Fixed. The panel now stays full height - the top-bar offset is applied as padding on the content instead of margin on the panel, so no gap at top or bottom. Also gave .region-top-bar position: relative so it stays above the full-height panel. Tested across sizes + RTL.

Tested the latest changes on the MR and all is looking good.

Tested the latest changes and all is good.