Usando Bootstrap, tengo una columna de rejilla class="col-lg-3" que quiero colocarla en position:fixed mientras que la otra .col-lg-9 está en posición normal (desplazable por la página).
<div class="row">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
De la misma manera que la columna izquierda en LifeHacker.com Verás que la parte izquierda está fija aunque me desplace por la página.
Uso bootstrap v3.1.1
<div class="row">
<div class="col-lg-3">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
Normal data enter code here
</div>
</div>
iterando sobre la respuesta de Ihab's, simplemente usando position:fixed
y bootstraps col-offset
no necesitas ser específico en el ancho.
<div class="row">
<div class="col-lg-3" style="position:fixed">
Fixed content
</div>
<div class="col-lg-9 col-lg-offset-3">
Normal scrollable content
</div>
</div>
Siguiendo la solución aquí [
][1],<div class="row">
<div class="col-lg-3 fixed">
Fixed content
</div>
<div class="col-lg-9 scrollit">
Normal scrollable content
</div>
</div>
He modificado algunos css para que funcione perfectamente:
.fixed {
position: fixed;
width: 25%;
}
.scrollit {
float: left;
width: 71%
}
Gracias @Lowkase por compartir la solución.