Fijar Widget lateral en WordPress sin plugins

[ 7 julio 2021 ] [ Actualizado: 8 julio 2021 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

js mejoras

¿Te gustaría fijar un widget de la barra lateral, de manera que cuando se haga scroll el widget aún permanezca visible?, veremos cómo realizar esto directamente a través de código Javascript y CSS.

Resultado Final

Al final lo que queremos obtener es algo similar a la siguiente imagen en donde el widget que tiene el video permanece fijo al hacer scroll.

Código Javascript para fijar el widget

Usaremos código Javascript para agregar una clase CSS la cual fijará el widget, esta clases se agregará o removerá de acuerdo a una determinada condición. Además mantendremos el ancho del widget cuando este se fije.

(function( $ ) {
	'use strict';

     $(document).ready(function(){

        const watch_header = '#genesis-nav-primary'; //cambiar
        const fixed_element = '#text-6'; //cambiar

        const ob = new IntersectionObserver(obCallback);

        ob.observe(document.querySelector(watch_header));

        function obCallback(payload) {

            if ( payload[0].intersectionRatio == 0 ){
                const width = $(fixed_element).width();
                $(fixed_element).addClass('fixed-widget').width(width);
            } else {
                $(fixed_element).removeClass('fixed-widget').width('auto');
            }
        }
    });

})( jQuery );

En el código anterior:

• Agregamos toda la lógica en el evento ready
• Definimos dos constantes, la primera hace referencia al elemento que se observará
• La segunda constante hace referencia al elemento que se mantendrá fijo
• Usamos la API de Intersection Observer de javascript la cual nos ayudará a detectar si el elemento observado se encuentra o no visible
• Intersection Observer tiene un callback en el cual definimos la lógica, dentro de esta lógica agregamos o quitamos la clase fixed-widget y también establecemos el ancho del elemento

Código CSS para fijar el Widget

El siguiente código CSS define el comportamiento de la clase fixed-widget, como vemos sólo tendrá efecto para tamaños de pantalla mayores a 980px.

@media (min-width: 980px) {
  .fixed-widget {
    position: fixed;
    z-index: 999;
    top: 0;
  }
}

Solución alterna, sólo con CSS (position:sticky)

Si sólo quieres fijar el elemento en el top cuando este llegue al borde, y no observar otros elementos visibles, posiblemente no necesites usar Javascript y sólo podría hacerlo con CSS, específicamente usando: position:sticky

@media (min-width: 980px) {
  #text-6{
    position: sticky;
    top: 0;
  }
}

En el ejemplo anterior tienes que cambiar #text-6 por el ID o por la clase CSS del elemento que quieres fijar.

Conclusión

Si tu sitio web tiene una estructura con barra lateral, puedes evaluar fijar un widget en la parte superior cuando se hace scroll, y tal como hemos visto, puedes evitar el uso de un plugin adicional realizando esto directamente a través de código.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando...