Cómo Ocultar la Barra de WordPress al Hacer Scroll con JavaScript

Si quieres mejorar la experiencia de usuario en tu sitio WordPress ocultando la barra de administración (#wpadminbar) al hacer scroll, este código JavaScript te será de gran ayuda. Además, ajustará el encabezado para que quede fijo en la parte superior.

Paso 1: Instalar el Plugin Code Snippets

Antes de agregar el código, necesitas instalar el plugin Code Snippets (gratuito):

1. Ve a Plugins > Añadir nuevo en tu panel de WordPress.
2. Busca «Code Snippets» e instálalo.
3. Actívalo.

Paso 2: Agregar el Código JavaScript

1. Ve a Snippets > Añadir nuevo.
2. Pon un título descriptivo, como «Ocultar barra de admin al hacer scroll».
3. En el editor de código, pega el siguiente código en formato HTML con <script>:

<script>
jQuery(document).ready(function($) {
    var distanciaArriba = 100;
    $(window).on("scroll", function () {
        var topeScroll = $(window).scrollTop();
        if (topeScroll > distanciaArriba) {
            $("#wpadminbar").attr(
                "style",
                "top:0 !important; display:none !important; position: static !important"
            );
            $(".oxy-header-wrapper").attr("style", "top:0 !important");
        } else {
            $("#wpadminbar").attr("style", "");
        }
    });
});
</script>

4. Selecciona «Solo en el front-end» como ubicación.
5. Guarda el snippet y actívalo.

¿Cómo Funciona?

• distanciaArriba = 100: Define cuántos píxeles debes desplazarte antes de que se active el efecto.
• Oculta #wpadminbar: Al hacer scroll, la barra de WordPress desaparece.
• Ajusta el encabezado: Si usas Oxygen Builder (.oxy-header-wrapper), el encabezado se mantendrá arriba.

Conclusión

Este código es ideal para mejorar la navegación en tu sitio, especialmente si la barra de administración interfiere con el diseño. ¡Pruébalo y ajusta los valores según tus necesidades!