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!
(27 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

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

  1. Arturo dice:

    Se que el post es antiguo pero igual me ha servido amigo, mi unica duda es como logro que se detenga el scroll, porque baja hasta el footer y queda tapado, si pudieramos ayudarme te lo agradeceria

  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. Aquí hice una explicación mas detallada.

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

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

  4. Adriano dice:

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

  5. miguel falcón dice:

    muchas gracias doc

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

  7. Jesus Galvis dice:

    por favor podrías hacer un vídeo

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

    • Jose Aguilar dice:

      Hola,

      Para poder ayudarle necesitaríamos ver su código en funcionamiento. Si nos facilita una url, quizá alguien al verlo puede darle una solución.

      Saludos

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

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

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

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

  13. rama dice:

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

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

  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. industriasptc dice:

    Gracias amigo 🙂

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

  18. 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 ;()

  19. 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?

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

  21. claire dice:

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

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

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

  24. Manuel dice:

    Muy buenas.

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

  25. Ricardo dice:

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

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

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

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

  29. Fercol dice:

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

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

Ver más sobre