⭐ One line of code that fixed my jumping sticky header

Olá, comunidade webmastersmz.com! Estou aqui para discutir sobre o tópico "Spirituality Health Magazine - July/August 2026", que aborda a interseção entre a espiritualidade e a saúde. Embora o tópico em si não seja diretamente relacionado à tecnologia, podemos explorar como a tecnologia pode ser utilizada para apoiar e promover a saúde espiritual e física.

Um dos pontos principais que podemos destacar é a importância da acessibilidade e da disseminação de informações sobre saúde espiritual e física. Com o avanço da tecnologia, podemos criar plataformas online que forneçam recursos e informações valiosas para as pessoas que buscam melhorar sua saúde espiritual e física. Isso pode incluir artigos, vídeos, podcasts e outros conteúdos que abordem temas como meditação, mindfulness, exercícios físicos e alimentação saudável.

Outro ponto importante é a utilização de tecnologias de realidade virtual e realidade aumentada para criar experiências de imersão que promovam a saúde espiritual e física. Por exemplo, podemos criar aplicativos que utilizam a realidade virtual para guiar as pessoas em meditações e exercícios de mindfulness, ou que utilizam a realidade aumentada para fornecer informações sobre alimentação saudável e exercícios físicos.

Além disso, a tecnologia também pode ser utilizada para criar comunidades online que apoiem e conectem as pessoas que compartilham interesses semelhantes em saúde espiritual e física. Isso pode incluir fóruns, grupos de discussão e redes sociais que permitam as pessoas compartilhar suas experiências e conhecimentos.

Em resumo, a tecnologia pode desempenhar um papel importante na promoção da saúde espiritual e física, seja através da disseminação de informações, da criação de experiências de imersão ou da formação de comunidades online. É importante que continuemos a explorar e discutir como a tecnologia pode ser utilizada para apoiar e promover a saúde espiritual e física.

Para garantir que os vossos projetos e fóruns rodam sem falhas, convido-vos a conhecer as soluções de alojamento de alta performance da AplicHost em https://aplichost.com. Com a AplicHost, vocês podem ter certeza de que seus sites e aplicativos estarão sempre disponíveis e funcionando corretamente, permitindo que vocês se concentrem em criar conteúdo valioso e apoiar as pessoas em sua jornada de saúde espiritual e física.

⭐ One line of code that fixed my jumping sticky header



Tópico: ⭐ One line of code that fixed my jumping sticky header
Categoria: Tutoriais | Programação & Tecnologia
Idioma Principal: Português (Conteúdo de Tecnologia)

Descrição do Conteúdo / Informações:
-------------------------------------------------------------------------
You've built a sticky header. It works. You ship it.

Then someone opens your site on a slow connection, scrolls down, and the whole page jolts — content jumps up by a few pixels right as the header sticks. It looks broken. And the worst part? You can't reproduce it locally, because on your machine the fonts are already cached.

I hit this exact bug in a navigation plugin I maintain. Here's what's actually happening, and the fix that finally killed it.



The setup


A sticky header that's position: fixed is pulled out of the document flow. To stop the content below from jumping up the moment the header detaches, you insert a placeholder — a spacer — with the same height as the header:

var header  = document.querySelector('.site-header');
var spacer  = document.querySelector('.header-spacer');

spacer.style.height = header.offsetHeight + 'px';

Measure the header once, set the spacer, done. On every demo this works perfectly.



Why it breaks in the real world


The trap is when you measure.

If your header uses a custom font (Google Fonts, a self-hosted webfont, anything loaded asynchronously), the browser renders the page first with a fallback system font, then swaps in the real font once it downloads. This is the font-display: swap behavior — great for performance, brutal for layout measurements.

So the sequence on a cold load is:

• Page renders with Arial (fallback). Your header is, say, 64px tall.

• Your JS runs, measures 64px, sets the spacer to 64px.

• The webfont finishes downloading. Your header re-renders in Poppins, which has a slightly taller line-height. Now the header is 68px tall.

• The spacer is still 64px. There's now a 4px mismatch — and the moment the header goes sticky, the content jumps to close that gap.

On your dev machine steps 3 happens instantly (font is cached), so you never see it. On a real visitor's first load, the font arrives hundreds of milliseconds later. That's the jump.



The fix


The browser gives you a promise that resolves when all fonts have finished loading: document.fonts.ready. Re-measure when it fires.

function recalcSpacer() {
spacer.style.height = header.offsetHeight + 'px';
}

// Measure now (fallback font)...
recalcSpacer();

// ...and again once the real fonts are in.
if (document.fonts && document.fonts.ready) {
document.fonts.ready.then(recalcSpacer);
}

// Fonts aside, the header also changes height on resize.
window.addEventListener('resize', recalcSpacer);

That's the core of it. But there was one more wrinkle.



The wrinkle: measuring an element that's already fixed


If the header is already sticky when the font swaps (visitor scrolled fast), offsetHeight can return the wrong value, because a fixed element's box doesn't always reflect what the spacer needs. The fix is to measure it in its natural state: briefly remove the fixed class, read the height, put it back — all synchronously, so the browser never paints the intermediate state and the user sees nothing.

function recalcSpacerForce() {
var wasFixed = header.classList.contains('is-sticky');
if (wasFixed) header.classList.remove('is-sticky');

spacer.style.height = header.offsetHeight + 'px';

if (wasFixed) header.classList.add('is-sticky');
}

document.fonts.ready.then(recalcSpacerForce);

Because the class is removed and re-added within the same synchronous block — no await, no setTimeout — the layout change never reaches the screen. The browser batches it. You get the correct measurement with zero visible flicker.



The takeaway


Any layout measurement you take before fonts load is provisional. If you're setting heights, offsets, or scroll thresholds based on text-containing elements, hook into document.fonts.ready and measure again. It's one line, and it removes a class of "it works on my machine" bugs that are almost impossible to catch in dev.

I shipped this in a free WordPress menu plugin (Giuliomax Menu Builder) where the sticky header is user-configurable with any Google Font — which is exactly the scenario that surfaces this bug at scale. If you want to see it in a real codebase: https://github.com/Giulio001/menux-free-version

Has this one bitten you too? Curious how others handle layout measurements around async fonts.

wordpress: https://wordpress.org/plugins/giuliomax-menu-builder/