me pregunto si alguien ha encontrado una solución para esto?
estoy buscando una solución para añadir un elemento a la parte superior de un desplazamiento de contenedores
HTML:
<div class="container">
<div class="header">title</div>
<div class="element">......</div>
... (about 10-20 elements) ...
<div class="element">......</div>
</div>todos los «elementos» han position:relative,
el contenedor tiene el siguiente CSS:
.container {
position:relative;
width:200px;
height:400px;
overflow-y:scroll;
}quiero el encabezado para permanecer en la parte superior del contenedor, independientemente de su desplazamiento y la posición de los elementos de desplazamiento debajo.
el CSS hasta ahora:
.header {
position:absolute; /* scrolling out of view :-( */
z-index:2;
background-color:#fff;
}
.element{
position: relative;
}todos los elementos son elementos de bloque, y no puedo mover el encabezado de la parte exterior del contenedor.
jquery no es una opción en este momento.
- Usted puede hacer esto con jquery. ruturaj.net/automatic-header-stick-to-scroll-with-jquery
- Si el contenedor no estaba en posición relativa, el encabezado sería en la parte superior de la misma cuando la posición absoluta. Podría su encabezado ser un precedente hermano del contenedor (bueno, «el contenedor» ahora sería el «contenido» o algo así) o sus elementos tienen su propio contenedor y no
position: relativeen el contenedor? - posición: fijo no respeta posición relativa. Se fija realtively para el documento en todo momento.
- No hay necesidad de
fixedsi he entendido OP correctamente peroabsolute - jQuery no es una opción … y como se dijo antes, no hay ninguna posibilidad de cambiar la estructura. posición:fijo se fija a la ventana, donde position:absolute significa que el encabezado de desplazamiento fuera de la vista si el contenido es mayor que el de los contenedores de altura.
- lo que yo necesito, es que el encabezado de estancias (visible) en la parte superior del contenedor, no importa si el contenido es 900px de alta y se desplazan hacia abajo. en el momento en que se desplaza con el resto de los contenidos y esté fuera de la vista si el contenedor se desplaza hacia abajo.
Creo que la solución pase con
position:sticky. Parece comoposition:fixedpero respeta la posición relativa de sus padres.Por desgracia, esta es una característica experimental, y sólo se admite en Cromo. Usted puede ver más detalles en esta página de prueba.
El puro css solución que viene a mi mente es que con un pequeño cambio en el marcado. Usted puede establecer un contenedor sólo para los «elementos» como este:
Y dar el desbordamiento de este recipiente interior. Ahora, su cabecera se pega en la parte superior.
Aquí un demo.
jQuery UI añadido un posición() método de utilidad para este propósito que iba a hacer su vida más fácil.
Definitivamente me ayudó.
La solución en este caso sería el pop el título fuera del desplazamiento del elemento:
Aunque probablemente debería tener mejores elementos semánticos, si es posible (sólo una suposición aquí):
La mejor respuesta que usted encontrará nunca a una solución es a través de este enlace Cómo fijo desplázate div después de cierta altura y parada después de llegar a otros div?
Espero que esto salva a alguien de algunas google momento
JS:
CSS:
HTML: