¿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.
Muchas gracias por esta solución, intento utilizar cuantos menos plugins posibles para intentar no reducir la velocidad de la web. Un saludo.
Que bueno que te sirvió, te sugiero que pruebes la solución con CSS primero que es la más liviana. Saludos.