Div que te sigue con el scroll

Cuando tenemos páginas con mucho contenido y muy largas generándose scroll en la pantalla del navegador puede ser interesante mantener visible o en una posición fija un menú por ejemplo o cualquier elemento que queramos quedando así accesible en todo momento para el usuario.

Podemos imaginar una página que tiene un menú superior y mucho contenido generándose scroll. Si el usuario ha llegado a abajo y quiere cambiar de categoría o sección generalmente debe desplazarse hacia arriba para localizar el menú. Puede ser un poco incómodo.

Este inconveniente de navegación puede hacernos perder ventas o visitas debido al cansancio de tener que subir y bajar scroll de página constantemente para cambiar de sección. A la hora de crear páginas Webs siempre se debe mirar la facilidad de navegación y la usabilidad.

Para solucionar este problema puedes utilizar  el atributo position de CSS en el contenedor que queremos tener siempre visible:

position: fixed;

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áginas.

El código CSS que necesitamos para fijar nuestro elemento es el siguiente:

.my-fixed-item {
    position: fixed;
    min-height: 120px;
    width: 252px;
    text-align: center;
    word-wrap: break-word;
    background-color: aquamarine;
}

En este caso tenemos una clase CSS que usaremos para fijar nuestro elemento en la página y añadirle algunos estilos personalizados. En este caso:

  • Estamos fijando la posición fija.
  • Establecemos una altura mínima de 120px.
  • Establecemos un ancho de 252px.
  • Ponemos el texto centrado.
  • Evitamos que el texto se salga del contenedor.
  • Establecemos un color de fondo “aquamarine”.

Dentro de las etiquetas <body> tenemos nuestro código HTML:

<div class="my-fixed-item">
    Columna izquierda que se mueve con el scroll...
</div>

Si usas Bootstrap 4 en tu sitio, conseguir esto resulta mucho más sencillo. Tan solo tienes que añadir la clase “position-fixed” al contenedor que quieres fijar, como por ejemplo:

<div class="position-fixed">
   Columna izquierda que se mueve con el scroll...
</div>

 

Ver demo Descargar

Esta entrada ha sido actualizada el 17/09/2018.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (16 votos, promedio: 4,88 de 5)
Cargando…
Comparte en las redes sociales

48 respuestas a “Div que te sigue con el scroll”

  1. Abraham dice:

    Espero hacer entender:
    Hay algún código que al ir bajando el scroll vallan apareciendo diferentes textos estilo TOOLTIP junto a la barra del scroll. Aquí hice una explicación mas detallada.

    https://es.stackoverflow.com/questions/218944/se-puede-mostrar-un-tooltip-junto-a-la-barra-del-scroll

  2. Abraham dice:

    Espero hacer entender:
    Hay algún código que al ir bajando el scroll vallan apareciendo diferentes textos estilo TOOLTIP junto a la barra del scroll. Espero su respuesta!

  3. Adriano dice:

    buen trabajo jose. Este tutorial me ha servido mucho!!!

  4. miguel falcón dice:

    muchas gracias doc

  5. Oscar dice:

    Hola Jose,

    Intenté meter el código en mi website pero no tuve éxito, mi objetivo es inmovilizar la barra lateral de este link >>> https://www.madisonbycarol.com/foro

    Ahorita estoy trabajando con weebly, espero puedas apoyarme amigo.

    Slds

  6. Jesus Galvis dice:

    por favor podrías hacer un vídeo

  7. Meriem Abjil Bajja dice:

    Hola,

    Tengo un problema. Estoy haciendo una pagina web y tengo un div contenedor con muchos div dentro donde queria hacer un sroll horizontal en el contenedor. Ya probé en ponerle un overflow-x: scroll y overflow-y: hidden pero no me funciona.

    Sabes como hacerlo?

    Gracias

  8. Juan dice:

    Se que es algo viejo este tema… pero tengo el siguiente problema… tengo un codigo similar al tuyo, pero necesito ponerle un limite a la imagen…
    es una publicidad que se queda fija mientras baja, el tema es que quiero que el limite sea el inicio del footer… osea que cuando llege al footer, el scroll pare y no se monte sobre el footer…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre