← Todos los artículos

Tutoriales

Doma los elementos sticky que tapan tu contenido

15 mayo 2026 · por JustZix Team

Un header sticky que se queda de 90 px de alto mientras haces scroll. Una barra flotante «suscríbete a la newsletter». Un botón «volver arriba» que tapa la última frase de un párrafo. Los elementos pegados a la pantalla pueden comerse un tercio de la vista. Aquí está cómo domarlos.

Qué los pega

Dos propiedades CSS: position: sticky (el elemento se pega en cuanto haces scroll hasta su sitio) y position: fixed (el elemento se queda quieto desde el principio). Ambas pueden sobrescribirse.

Dos enfoques

Despega — el elemento se queda, pero se desplaza con la página. Bueno para los headers útiles, que simplemente no deben estar arriba para siempre.

header, .site-header, .navbar,
[class*="sticky"], [class*="fixed"] {
  position: static !important;
}

Oculta — el elemento desaparece del todo. Bueno para los CTA flotantes, los widgets «volver arriba», las barras promocionales.

[class*="back-to-top"], [class*="scroll-top"],
[class*="sticky-cta"], [class*="floating-bar"] {
  display: none !important;
}

Cómo encontrar al culpable

¿No estás seguro de qué elemento está pegado? Abre la JS Console de JustZix y escribe:

[...document.querySelectorAll('*')]
  .filter(el => {
    const p = getComputedStyle(el).position;
    return p === 'fixed' || p === 'sticky';
  })
  .forEach(el => console.log(el));

La consola lista cada elemento fixed y sticky — pasa el ratón sobre cada uno para verlo en la página, luego copia su clase al selector de la regla.

Trampas

• Despegar un header puede costarte estéticamente. Algunos layouts cuentan con que el header sea fixed; tras position: static el contenido de abajo puede saltar arriba. Normalmente aceptable, pero compruébalo.
• No todo sticky es malo. Un índice sticky o una barra de progreso de la lectura pueden ser útiles — apunta con precisión, no a granel.
• Selectores por fragmento de clase. [class*="fixed"] también golpea .fixed-width, que con el posicionamiento no tiene nada que ver. position: static sobre él no rompe nada, pero conviene saberlo.

Mira también

• Ejemplos — el snippet para ocultar los widgets de chat y otros
• Oculta los banners de cookies — adelgazamiento afín de los elementos invasivos
• Construye tu propio modo lectura — adelgazar una página hasta el fondo

Instala JustZix — y recupera la pantalla ocupada por las barras pegadas.