Estoy creando una galería de proyectos usando una rejilla de imágenes, donde cada imagen es un proyecto. Al pinchar sobre la imagen se despliega un div dentro de la rejilla donde está todo el contenido referente a dicho proyecto. Visualmente sería algo como esto
Dentro del div que se expande, además del contenido, hay un botón para cerrar el div y un par de flechas para saltar tanto al proyecto anterior como al siguiente que se muestran con un "position: absolute" en CSS.
Al tener bastante contenido dentro del div hay que hacer scroll para poder ir leyéndolo todo y, mediante Javascript, he conseguido cambiar el atributo "position" en estos elementos (cerrar, anterior y siguiente) de "absolute" a "fixed" cuando se hace scroll para que sigan al contenido del div y sean accesibles en todo momento. El problema que no consigo resolver es el siguiente:
Al cambiar el atributo a "fixed" ya da igual si seguimos haciendo scroll en la página, más allá del div desplegado, porque estos elementos mantienen siempre esa posición fixed mostrándose fuera del div desplegable con el que interactúan y colocándose encima de cualquier cosa que haya en la página. Mi pregunta sería:
¿Es posible volver a cambiar ese atributo cuando se ha llegado al final del div desplegable para que no se salga de la caja? Imagino que si recojo la altura de ese div (que varia dependiendo del proyecto) y lo comparo con el tamaño de la ventana del navegador puedo posicionar los elementos para que no lleguen a salirse de la caja, pero igual me estoy liando y no es la forma de hacerlo.
Pongamos que tengo un código como este en el HTML
Código HTML :
<div class="container"> <ul> <li><a href="#"><img src="pictures/pic1.jpg"/></a></li> <li><a href="#"><img src="pictures/pic2.jpg"/></a></li> <li><a href="#"><img src="pictures/pic2.jpg"/></a></li> <li><a href="#"><img src="pictures/pic3.jpg"/></a></li> </ul> //El siguiente div se genera dinámicamente, como en el ejemplo que os he puesto arriba <div class="expanded"> <div class="contenidoExpanded"> <p class="cerrar"><a href="#">cerrar</a></p> <p class="anterior"><a href="#">anterior</a></p> <p class="siguiente"><a href="#">siguiente</a></p> Aquí luego vendría el contenido compuesto por párrafos, imágenes, listas, videos... lo que sea </div> </div> </div>
El código CSS, resumiendo, para los elementos con los que tengo el problema sería algo así
Código CSS :
.anterior, .siguiente{
position: absolute;
top: 350px;
}
.cerrar {
position: absolute;
top: 25px;
}
Y el Javascript que tengo hasta ahora, con el que cambio los atributos es algo así:
Código Javascript :
$(document).ready(function(){
window.onscroll = function() {
if (window.pageYOffset >= 100){
$('.cerrar').css({position: 'fixed', top: '40px'});
$('.siguiente, .anterior').css({position: 'fixed', top: '350px'});
}
else {
$('.cerrar').css({position: 'absolute', top: '25px'});
$('.siguiente, .anterior').css({position: 'absolute', top: '350px'});
}
}
});
No se si me he explicado correctamente sobre el problema que tengo. Espero que alguien me pueda echar un cable. Muchas gracias a todos y perdón por el mensaje tan largo, me gustaría poder adjuntar una url como mi ejemplo específico pero lo estoy haciendo todo en local. Si necesitáis más información o me he olvidado de algo, decidme, por favor.
Muchas gracias de nuevo
