Lo que veremos ahora es una forma fácil de lograrla y que resulta muy útil cuando tienes contenido extenso y quieres aprovechar el espacio de tu sidebar o que no luzca en blanco.
La instalación
Lo primero hacemos es buscar el cierre de la etiqueta BODY y antes pegamos este código:<script>En el código anterior buscamos la primera línea:
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("ID del widget");
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>
bs_makeSticky("ID del widget");Y ahí ingresamos la ID de nuestro widget.
Guardamos los cambios y podremos ver los resultados inmediatos. De hecho este es el mismo código que usamos en el sidebar de este blog.
¿Qué te ha parecido?
