¡APRENDE CON NUESTRO BLOG!

SIDEBAR STICKY CON CSS: Convierte tu barra lateral estatica en WordPress 2022

Aprende como hacer una barra lateral de Wordpress en SIDEBAR STICKY CON CSS
30 de junio de 2022

¡Crea una sidebar sticky con CSS! En esta publicación aprenderás cómo hacer que tu Barra Lateral de tu sitio de WordPress se convierta en Sticky con este truco en WordPress

De igual forma, te explico por qué es mejor usar código CSS, en lugar de un plugin que lo haga.

 Leer también: Aprende Cómo Hacer Links Telefónicos O Mailto Para Hacer Clic En Los Widgets De Elementor 2022

Hacer una barra lateral de WordPress en SIDEBAR STICKY CON CSS

Hacer una barra lateral de WordPress en SIDEBAR STICKY CON CSS

Seguro que te ha pasado, que entras a un sitio web donde encuentras un elemento; como puede ser un menú superior, o una barra lateral, conforme haces tu recorrido web en la pantalla, te sigue a medida que se desplaza hacia abajo en la página

Esto es lo que llamo una barra lateral STICKY, y he pasado muchas horas luchando con el código heredado tratando de depurar uno. En el pasado, los desarrolladores utilizaban JavaScript para crear esta función, al volver a calcular la posición de la barra lateral en el evento de desplazamiento del navegador. Esto era complicado de mantener y también costoso para el rendimiento.

Porque no usar plug-ins para WordPress Stick Sidebar

Hay muchos complementos de WordPress disponibles para hacer que los widgets de la barra lateral sean pegajosos. Las barras laterales adhesivas y los widgets permanecen visibles cuando un lector se desplaza hacia abajo en la página para leer la publicación de blog extensa.

Prefiero usar menos complementos y tratar de encontrar la forma más simple y mejor de solucionar los problemas de WordPress. Fijar elementos mediante posicionamiento Sticky y css es lo ideal.

Ni mencionar que la mayoría de complementos de WordPress para hacer elementos Sticky son de pago.

Aquí está el código CSS muy simple, que hace que su barra lateral de WordPress sea pegajosa.

Cómo Hacer Barra Lateral Sticky CSS

/*The following code has made sidebar sticky and floating*/
/*https://tickera.com/blog/creating-sidebar-scrolls */
@media only screen and (min-width: 1024px) {
.widget-area {
position: -webkit-sticky;
position: sticky;
top: 0;
padding-top: 10px;
}
}

Este código CSS hace que la barra lateral sea pegajosa solo en la pantalla. He probado este código en el tema secuencial, pero es posible que deba modificar las clases de CSS con la clase de la barra lateral de su tema.

Por ejemplo, el código anterior no hace que la barra lateral sea pegajosa en nuestro tema actual que estamos utilizando en CreateWPTheme.com, pero sireemplazar.widget-area con grid-30 esteEl código CSS funciona y hace que nuestra barra lateral sea pegajosa.

/*The following code has made sidebar sticky and floating*/
/*https://tickera.com/blog/creating-sidebar-scrolls */
@media only screen and (min-width: 1024px) {
.grid-30 {
position: -webkit-sticky;
position: sticky;
top: 0;
padding-top: 10px;
}
}

Simplemente, agregue el código anterior en el archivo style.css de su tema hijo, guarde los cambios y listo. Si no está usando un tema secundario, puede ir a Apariencia – Editar módulo CSS y agregar este código.

Leer también: Qué son los enlaces ancla y por qué debes usarlos en tu web

Uso De Las Herramientas Para Desarrolladores De Chrome Para Probar CSS

Haga clic con el botón derecho en cualquier parte de la pantalla y abra las herramientas para desarrolladores de Chrome. Desde la pestaña de estilos, haga clic en su archivo style.css para abrirlo en el panel Fuentes. Ahora desplácese hacia abajo y al final del archivo style.css agregué el código anterior. Si este código hace que su barra lateral sea pegajosa, puede emplear este código, si no funciona, use la clase CSS de su barra lateral.

Tenga en cuenta que las alturas de los elementos principal y de la barra lateral se establecen usando unidades vh. 100vh es la altura de la ventana gráfica actual, por lo que establecer la altura del div principal en 150vh le da una altura que será 1,5 veces mayor que la de la pantalla.

¡Pero la barra lateral aún no es pegajosa! Cuando se desplaza hacia abajo en la página, la barra lateral no sigue. Todo lo que tenemos que hacer para arreglar eso es agregar dos líneas de CSS:

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

(Está bien, mentí, tres líneas para la compatibilidad de Safari con el -webkit-prefijo). Y ahí lo tiene, desplácese hacia abajo en la página y la barra lateral se pegará en la parte superior de la pantalla y lo seguirá hacia abajo.

La position: stickypropiedad le dice al elemento que se adhiera a la pantalla ( MDN puede explicar esto mejor que yo ), y el topvalor le dice al elemento dónde sentarse en relación con la pantalla a medida que se desplaza. Podríamos cambiar esto para top: 5%dejar un hueco, o por ejemplo left: 0, dependiendo de la dirección del desplazamiento.

Aquí hay uno que hice anteriormente en CodePen:

Intente cambiar la altura de la barra lateral a 110vh y vea cómo se detiene en la parte inferior de la pantalla. ¡Agradable!

Leer también: 7 Plugins de WordPress para Instagram ¡Muestra tu feed en tu blog!

Conclusión

Siempre considere qué navegadores admite cuando tome una decisión como esta. Combine esta información con caniuse para tomar una decisión informada. Emplee las estadísticas de todos los navegadores en caniuse y no solo las versiones más recientes. Pregúntese, ¿cómo afectaría la experiencia del usuario si la barra lateral no fuera pegajosa? ¿El sitio web se rompería por completo o perderían una característica decorativa agradable de tener?

Como siempre, depende de su aplicación en particular y no hay una respuesta que se aplique a todas las situaciones. Pero es realmente genial que ahora podamos crear funciones como esta únicamente con CSS y una herramienta útil para tener en su kit de herramientas de CSS.

/* Sticky SIDEBAR para OCEANWP */
@media only screen and (min-width: 960px) {
aside#right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 15px;
}
/* Sticky SIDEBAR para DIVI o EXTRA Theme*/
.et_pb_extra_column_sidebar {
  height: 0%;
  position: -webkit-sticky;
  position: sticky;
  top: 10%;
}

Comments

Comenta tus dudas, opiniones, nos gustaría saber que piensas

el autor

Carlos Mora

Soy Carlos Mora, nativo digital y fundador de Estudio Quesadilla.

Gracias por leer todo

Aprende sobre Diseño, Programación, Redes Sociales, Marketing y más en CoderHouse

coder.carlos.a0b4
CoderHouse Descuento