Cabecera Sticky Astra Free: Tutorial JS + CSS en Child Theme

¿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