Implementación del Affix de Bootsrap

por Natalia Ventre el ・ podés leerlo en 1 minuto ・

Bootsrap permite crear un sitio rápidamente, simplemente agregando un par de clases aquí y allá, pero para hacer funcionar algunos componentes correctamente hay que trabajar un poquito más.

bootsrap-affix.js agrega una clase que define position:fixed al llegar a determinado punto, dejando el elemento siempre visible, mientras se scrollea el resto del documento.

Paso 1: Agregar data-spy=”affix” a un elemento de la barra lateral no tiene misterio.

<div data-spy="affix" class="quick-contact">
	...
</div>

Paso 2: Para determinar el data-offset (que define en qué punto del scroll se activa el affix), tomé una captura de pantalla con LittleSnapper y simplemente medí los pixeles.

<div data-spy="affix" data-offset-top="460" class="quick-contact">
	...
</div>

Paso 3: Como se trata de un sitio responsive, el paso siguiente fue evitar que el evento se detonara en phone y landscape tablet, ya que en esos casos, la sidebar en vez de a la derecha queda abajo del contenido principal.

En responsive.scss1:

@media (max-width: 767px) {
	.affix{
		position: static;
	}
}
@media (max-width: 480px) {
	.affix{
		position: static;
	}
}

Paso 4: Para terminar, como position:fixed necesita un width, agregué width: inherit para que herede el ancho del parent.

.affix{
	top: 10px;
	width: inherit;
}

  1. o responsive.less, estoy usando la versión de Bootstrap que ofrece Yeoman