Capa Fixed de tamaño variable

[Dose]

Hola Foro,

Estoy trabajando en un portfolio en el que la descripción de cada trabajo se coloca en la parte superior de la web en un div fixed y la intención es que al hacer scroll para ver las imágenes, éstas estén siempre por encima del texto.

En principio no tiene mucha complicación. Un div "fixed" para la descripción y otro "relative" con cierto padding superior para dejar ver el texto.

El problema viene cuando el texto es mayor que el espacio que deja ese padding.

Hay alguna manera de que el div contenedor de imágenes se varíe su posición en función del tamaño del div texto, pero sin que éste pierda la característica de permanecer fijo?

[ZequeZ]

Mmm, a mí no se me ocurre mucho, pero podrías poner la capa con posición relativa, y luego, con JavaScript calculás el height; de esta y lo establecés por CSS, luego pones la capa como position:fixed; y listo, te queda el espacio.

Código:

<div>
   <div style="position:relative;">asdasdasdasdasd</div>
</div>
<div>Página!</div>

Cuando comienza el scroll, evento detectado con JavaScript, lo cambias a lo siguiente.

Código:

<div style="height:20px;">
   <div style="position:fixed;">asdasdasdasdasd</div>
</div>
<div>Página!</div>

Aquí, siendo 20px el tamaño de la capa con asdasdasdasd

[Dose]

Al final he hablado con el cliente y hemos decido "jugar" con varias class con diferentes paddings, así dependiendo de lo que necesite puede usar uno u otro.

Aunque probaré tu solución. Gracias! :)