Sidebar fija

Me preguntaban si es posible fijar la sidebar al igual que hacemos con el fondo estático, y la respuesta es si.

El ejemplo que me han mandado es el blog de Joshua Peterson uno de los diseñadores de las nuevas plantillas de Blogger,y como puede verse el header o cabecera del blog ocupa la parte superior de las entradas de forma que la sidebar queda a la misma altura.

Como no se trata de modificar nuestra plantilla sino de dejarla tal y como está pero fijando la sidebar lo que haremos será añadir la propiedad fixed que posiciona un elemento de forma flotante.

Si hacemos un poco de memoria recordaremos haber añadido esa propiedad en alguna ocasión por ejemplo en la imagen de subir y bajar con efecto deslizante o añadiendo la imagen fija para Twiter

Para fijar la sidebar tendremos en cuenta que el contenido no debe ocupar demasiado espacio porque de lo contrario quedaría oculto sin posibilidad de poder mostrarlo. Por eso las páginas solemos ver con esta opción son de tipo portafolio cuyo contenido es escaso.

Buscamos sidebar-wrapper y añadimos lo marcado en negrita:

#sidebar-wrapper {
margin-top:-5px;
margin-left: 640px;
position:fixed;
width: 220px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Con margin-top decidimos a qué altura situaremos la sidebar para que el contenido sea visible en su totalidad.

Con margin-left haremos lo mismo pero esta vez dejando más o menos espacio a la izquierda de la sidebar de forma que no llegue a ocupar el espacio de las entradas.