{"id":1481,"date":"2012-02-02T20:15:56","date_gmt":"2012-02-02T20:15:56","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1481"},"modified":"2019-07-05T10:15:56","modified_gmt":"2019-07-05T10:15:56","slug":"div-que-te-sigue-con-el-scroll","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/div-que-te-sigue-con-el-scroll\/","title":{"rendered":"Div que te sigue con el scroll"},"content":{"rendered":"

Cuando tenemos p\u00e1ginas con mucho contenido y muy largas gener\u00e1ndose scroll<\/strong> en la pantalla del navegador puede ser interesante mantener visible o en una posici\u00f3n fija<\/strong> un men\u00fa por ejemplo o cualquier elemento que queramos quedando as\u00ed accesible en todo momento para el usuario.<\/p>\n

Podemos imaginar una p\u00e1gina que tiene un men\u00fa superior y mucho contenido gener\u00e1ndose scroll<\/strong>. Si el usuario ha llegado a abajo y quiere cambiar de categor\u00eda o secci\u00f3n generalmente debe desplazarse hacia arriba para localizar el men\u00fa. Puede ser un poco inc\u00f3modo.<\/p>\n

Este inconveniente de navegaci\u00f3n puede hacernos perder ventas o visitas debido al cansancio de tener que subir y bajar scroll de p\u00e1gina constantemente para cambiar de secci\u00f3n. A la hora de crear p\u00e1ginas Webs siempre se debe mirar la facilidad de navegaci\u00f3n y la usabilidad.<\/p>\n

Para solucionar este problema puedes utilizar\u00a0 el atributo position<\/em> de CSS<\/strong> en el contenedor que queremos tener siempre visible:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
position<\/span>:<\/span> fixed<\/span>;<\/span><\/pre><\/div><\/div><\/pre>\n
En el ejemplo asociado a esta entrada tenemos un elemento a la izquierda que es el que se mueve o desplaza con el scroll y una parte central que es donde se supone que se muestra el contenido principal de las p\u00e1ginas.<\/p>\n
El c\u00f3digo CSS<\/strong> que necesitamos para fijar nuestro elemento es el siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.my-fixed-item<\/span> {<\/span>\n    position<\/span>:<\/span> fixed<\/span>;<\/span>\n    min-height<\/span>:<\/span> 120px<\/span>;<\/span>\n    width<\/span>:<\/span> 252px<\/span>;<\/span>\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\n    word-wrap:<\/span> break-word;<\/span>\n    background-color<\/span>:<\/span> aquamarine;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
En este caso tenemos una clase CSS<\/strong> que usaremos para fijar nuestro elemento en la p\u00e1gina y a\u00f1adirle algunos estilos personalizados. En este caso:<\/p>\n