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 - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (13 votos, promedio: 4,85 de 5)
Cargando…
Comparte en las redes sociales

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

  1. Fercol dice:

    Hola me puedes ayudar a poner la columna de la derecha (los ultimos gadets que hagan scroll) gracias!

  2. victor varas dice:

    estimado, tienes el codigo de la div que tienes a la derecha de esta pagina y que al hacer click sube la pagina hacia un anclaje, top parece ser
    te lo agradezco

  3. miguel dice:

    hola!
    pretendo hacer un div que al inicio se ubique en el centro vertical de la pagina y al mover el scroll se coloque en la parte superior y no sesaparezca, sabes si es posible con css o requiere javascript?
    ojalá puedas ayudarme. saludos!

  4. david dice:

    Amigo podrías explicar cómo hacer el div que sigue al scroll tal como lo tienes en esta página, para colocar los enlaces de facebook, twitter, etc, por favor.

    Saludos y gracias de antemano

  5. Ricardo dice:

    Hola José! muchas gracias por compartir esto, una pregunta,puedo colocar el div de manera horizontal? Gracias!

  6. Manuel dice:

    Muy buenas.

    Podrias decirme como se hace en prestashop 1.5 ? Entiendo los cambios pero no se donde.

  7. Hola amigo muy buena explicacion. me gustaria saber si me pudieras ayudar a darme alguna idea de como poder hacer una maquetación web que sea como si tuvieras 3 divs(no se como hacerlo, asi que supongo son divs) y con un menu que este siempre visible que tenga tres opciones que te permitan ir a cada uno de los divs pero hacer la transicion de estos de derecha a izquierda… se puede?, que se necesitaria?

    te lo agradeceria que me pudieras ayudar

  8. Alberto dice:

    Hola,

    Estoy usando para mi web la plantilla de WordPress: “Independent Publisher”, y no consigo encontrar los códigos sobre los que modificar el html ni css. Lo que quiero es poder fijar la parte de autor con la foto de perfil y demás (columna izqda) mientras la parte de las entradas hace scroll.
    Espero que me puedas ayudar.

    Un saludo!

    • Jose Aguilar dice:

      Bueno es que cada plantilla es un mundo porque cada programador/maquetador la hace como quiere. No se como es esa plantilla pero para añadir esta funcionalidad debería haber un styles.css en la raiz de la plantilla y en el header.php o footer.php deberías añadir los htmls.

  9. claire dice:

    hola Jose , necesito su ayuda , me gustaria saber como se pone dos scroll pane , del lado izquierda uno despues de otro

  10. jose dice:

    Hola, quisiera saber como se hace (intente de varias maneras y no tengo el resultado esperado): tener una publi a la izq (fixed), en el centro el contenido web y a la derecha otra publi (fixed). Porque no le encuentro la vuelta para los 3 contenidos. Gracias

  11. Ricardo dice:

    Muchas gracias por el aporte, tengo una duda, tengo un div que muestra una imagen muy larga lo que hace que cuando el scrollbar se desplace la imagen queda sobre el footer (otro div), como puedo hacer para limitar el desplazamiento y que cuando llegue al div del footer no se encime y se vea completa la imagen

    • Jose Aguilar dice:

      Es un poco difícil darte una respuesta sin ver el problema en directo. Nos puedes facilitar la url del problema para revisarlo?

  12. pepinca dice:

    Quiero emular el telefono lateral de la web de http://store.hp.com/SpainStore/
    así llegué a tu tutorial y me quedé contentísimo, con ejemplo y todo. Enhorabuenas José desde Mallorca. Y gracias no es el primer tutorial tuyo que me sirve. Buen posicionamiento en google por algo és ;()

  13. Fernando dice:

    Hola, buenos dias. Estoy trabajando en la creacion de una tienda online con prestashop 1.6. Estoy usando la plantilla por defecto Bootstrap. Queria que mis modulos que hay a la izquierda Categorias, proveedores, fabricantes se quedaran fijos. No se con esta plantilla se puede hacer o hay que comprar una plantilla adecuada.

    Muchas gracias.
    Fernando.

  14. industriasptc dice:

    Gracias amigo 🙂

  15. Manuel dice:

    Hola Jose. Es posible hacer que el div donde se encuentra el Menú y otras cosas salgan de pantalla cuando se hace scroll a través del contenido en php. Tengo la barra de presentación debajo de la pantalla y el Menú en el mismo div. Quisiera que, cuando se accede al contenido, al hacer scroll hacia abajo, todo este div baje hacia afuera de pantalla y cuando subes con el scroll vuelva a la posición original. Es posible a través de css o hay que programar por javascript. Sabes

  16. Jose Pablo dice:

    como haria para que en un determinado momento ya no se quede fijo, osea como poniendo un limite hasta donde puede estar dijo y luego ya no

  17. rama dice:

    hola como como estan. necesitaria hacer que una etquta div siga al mouse en la navegacion…
    como poria hacerlo

  18. Jorge dice:

    Tengo un div con una animación, al momento de subir por la página, el contenido del div se monta sobre la barra de menú que fije en el borde superior. ¿Que solucion me aconseja?. Gracias
    formemos.com/menu(index2.html

  19. Jorge dice:

    Tengo un div con una animación, al momento de subir por la página, el contenido del div se monta sobre la barra de menú que fije en el borde superior. ¿Que solucion me aconseja?. Gracias
    formemos.com/menu/index2.html

  20. Manuel dice:

    Hola, tengo un problema con mi div. Es un menu vertical fijo. El problema es que yo quiero que el contenido sea un rectangulo en el medio de la web, pero al agregarle un padding-top o un margin-top, el div del menu vertical sigue en la izquierda pero se coloca debajo del contenido.

  21. 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…

  22. 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

  23. Jesus Galvis dice:

    por favor podrías hacer un vídeo

  24. 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

  25. Adriano dice:

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

  26. 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!

  27. 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

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