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:
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:
Esta entrada ha sido actualizada el 17/09/2018.
Autor
¿Buscas trabajo de programador?
49 respuestas a “Div que te sigue con el scroll”
Deja una respuesta
12 artículos que te podrían interesar
Ver más sobre
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
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
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!
Hola,
No estoy seguro si existe ya algo para eso pero si se puede programar.
Saludos
buen trabajo jose. Este tutorial me ha servido mucho!!!
muchas gracias doc
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
Hola buenas tardes,
He estado analizando tu sitio y siento decirte que esta explicación no sirve para tablas.
Saludos
por favor podrías hacer un vídeo
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
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
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…
Hola buenos días,
Para este tipo de ayudas que se salen de lo que hay en el blog debe enviarnos un ticket al centro de soporte y allí le indicaremos como podemos proceder:
https://www.jose-aguilar.com/soporte/
Saludos
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.
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
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
Hola, revisando este problema parece que ya ha sido corregido, verdad? saludos
hola como como estan. necesitaria hacer que una etquta div siga al mouse en la navegacion…
como poria hacerlo
Hola,
Creo que te puede servir lo explicado en este post:
http://www.jose-aguilar.com/blog/mousemove-obtener-coordenadas-de-la-posicion-del-raton-con-jquery/
Saludos
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
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
Hola Manuel,
Creo que será necesario hacer algo más por javascript en ese caso.
Saludos
Gracias amigo 🙂
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.
Este post no es posible aplicarlo a bootstrap. Posiblemente te pueda servir el siguiente enlace: http://jsfiddle.net/KyleMit/3RkM3/
Muchas gracias. Ya me han comentado que el tema no esta preparado.
un saludo.
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 ;()
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
Es un poco difícil darte una respuesta sin ver el problema en directo. Nos puedes facilitar la url del problema para revisarlo?
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
Muéstranos la url para verlo en directo. Seguro que alguien te ayudará
hola Jose , necesito su ayuda , me gustaria saber como se pone dos scroll pane , del lado izquierda uno despues de otro
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!
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.
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
Muy buenas.
Podrias decirme como se hace en prestashop 1.5 ? Entiendo los cambios pero no se donde.
Solamente tienes que poner position:fixed; al div que quieras mantener fijo
Hola José! muchas gracias por compartir esto, una pregunta,puedo colocar el div de manera horizontal? Gracias!
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
Si utilizas WordPress es un plugin que se llama Share This
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!
A simple vista diría que requiere javascript…
lograste hacerlo?? necesito el mismo codigo o el nombre del efecto! no logro encontrarlo!
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
Hola,
No lo tengo pero es un plugin de WordPress que se llama: Dynamic To Top
Se puede programar creando un marcador HTML al principio de la página
y luego al final de la página crear un vinculo a ese marcador:
«Botón arriba»
y con css colocarlo y darlo la apariencia que desees.
Me imagino que el preset lo tenga hecho de esa forma.
Hola me puedes ayudar a poner la columna de la derecha (los ultimos gadets que hagan scroll) gracias!
asi a ciegas no puedo ayudarte mucho. De que página se trata?
Gracias me ha ayudado mucho su trabajo.