Blog

¿Quieres una cabecera sticky  en Astra free que se active al hacer scroll, como en esta tienda real?

Te enseño paso a paso con JavaScript y CSS en child theme.

Sin Astra Pro ni plugins. Ideal para maquetadores freelance.

Problema y solución

Al scrollear, la barra de navegación principal debe fijarse arriba, ajustando el contenido (#content) para evitar solapamientos.

Solución: Añade clase «sticky» al header vía JS, con CSS para nav y padding.​

Requisitos:

• Child theme Astra.
• CSS encolado en functions.php.
• JS custom (/wp-content/themes/tu-child/js/custom.js).

Paso 1: Encolar JS en functions.php

Añade en functions.php de child theme:

function encolar_sticky_js() {
    wp_enqueue_script(
        'sticky-astra', 
        get_stylesheet_directory_uri() . '/js/custom.js',
        array('jquery'),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'encolar_sticky_js');

Tip: Prueba con alert('JS cargado'); en custom.js y recarga.​

Paso 2: CSS para sticky (Additional CSS o style.css child)

css.sticky .ast-primary-header-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
.sticky + #content {
    padding-top: 110px; /* Altura de la barra superior a la barra principal (la que deja de mostrarse). Mide la tuya */
}

Paso 3: JavaScript (custom.js)

document.addEventListener("DOMContentLoaded", () => {
 
  const nav = document.querySelector(".ast-primary-header-bar");
  const header = document.querySelector("header");
 
  const sticky = nav.offsetTop;
  window.addEventListener("scroll", () => {
    const isSticky = window.scrollY > sticky;
    header.classList.toggle("sticky", isSticky);
  });
});

Resultado

• Sin scroll: Header normal.
• Con scroll: Sticky nav + contenido ajustado.
  Demo live: perfumeriasgotta.com/es/ (ejemplo público educativo).

Preguntas comunes:

• ¿Funciona en mobile? Sí, responsive CSS.

Fuentes y referencias

Demo ejemplo: Perfumerías Gotta – Header sticky real (uso fair educational).​

Documentación Astra: wpastra.com/docs/sticky-header-pro – ​

Inspiración JS: W3Schools Sticky Header

Enqueuing WP: Codex WordPress – Best practices functions.php.

Cualquier IA para traducir el Javascript antiguo en moderno.

Notas

Código probado en child theme Astra 4.12.5

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!