• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Fijar Widget lateral en WordPress sin plugins

Fijar Widget lateral en WordPress sin plugins

Fijar Widget lateral en WordPress sin plugins

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

js mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿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.

Widget Fijo en barra lateral

 

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 );
Para agregar código Javascript en WordPress puedes revisar el artículo Insertar javascript en WordPress de forma correcta

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;
  }
}
Para agregar código CSS en WordPress puedes revisar el artículo Agregar CSS en WordPress de manera correcta

 

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.

Si quieres aprender más sobre esta propiedad sticky puedes revisar el artículo: cómo funciona realmente el posicionado sticky.

 

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.

Suscríbete a DecodeCMS:  

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Ocultar Widget Móviles WordPressOcultar Widgets en dispositivos móviles
  • Widget sidebar al inicio en móvilesMostrar widget lateral al inicio en móviles
  • Fechas relativas en WordPress a través de códigoFechas relativas en WordPress a través de código
  • Agregar archivos de fuentes tipográficas en WordPressAgregar archivos de fuentes tipográficas en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Carlos Wozi

    20 julio, 2021

    Muchas gracias por esta solución, intento utilizar cuantos menos plugins posibles para intentar no reducir la velocidad de la web. Un saludo.

    • Jhon Marreros Guzmán

      21 julio, 2021

      Que bueno que te sirvió, te sugiero que pruebes la solución con CSS primero que es la más liviana. Saludos.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Centrar Logo en Menú Principal

Deshabilitar el editor de bloques para Widgets en WordPress

WP CLI: Interfaz de línea de comandos para WordPress

Agregar CSS en WordPress de manera correcta

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados