Cómo añadir cabecera sticky con cambio de color al hacer scroll en WordPress

Cómo añadir cabecera sticky con cambio de color al hacer scroll en WordPress

1. Acceder al panel de administración de WordPress

• Inicia sesión en tu sitio de WordPress.
• Ve a «Apariencia» > «Personalizar».

2. Añadir CSS personalizado

• Selecciona «CSS adicional».
• Agrega el siguiente código CSS:

header {
    position: relative;
    transition: background-color 0.3s;
}

header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333; /* Color de fondo al hacer scroll */
    z-index: 1000;
}

3. Añadir JavaScript personalizado

• Ve a «Apariencia» > «Editor de temas».
• Selecciona el archivo «functions.php».
• Agrega el siguiente código al final del archivo:

function agregar_scripts() {
    wp_enqueue_script('sticky-header', get_template_directory_uri() . '/js/sticky-header.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'agregar_scripts');

4. Crear el archivo JavaScript

• En la carpeta de tu tema, crea una carpeta llamada «js».
• Dentro de «js», crea un archivo llamado «sticky-header.js».
• Agrega el siguiente código JavaScript:

jQuery(document).ready(function($) {
    var header = $('header');
    var sticky = header.offset().top;

    $(window).scroll(function() {
        if (window.pageYOffset > sticky) {
            header.addClass('sticky');
        } else {
            header.removeClass('sticky');
        }
    });
});

5. Guardar cambios

• Guarda los cambios en «functions.php» y en «sticky-header.js».
• Publica los cambios en el personalizador.

6. Probar la cabecera sticky

• Visita tu sitio web y desplázate hacia abajo para verificar que la cabecera se vuelve sticky y cambia de color.

.