es mi primera aparición aquí. Quería ver si alguien me puede echar una mano ya que me encuentro bloqueado con unos cálculos.
Tengo una rejilla de imágenes. Al pinchar en una de ellas, despliego un div y muevo la barra de scroll de tal forma que el div desplegado quede arriba de la página. Lo hago calculando el tamaño de la imagen, la distancia que tiene con el top de la página y el tamaño de la cabecera con esto código
thumbSize = $(this).height();
distanceItem = $(this).offset().top;
headerHeight = $('header').height();
Cuando se despliega el div, sumo la distancia de la imagen con el top de la página y el tamaño de dicha imagen para obtener a que distancia del top de la página está la parte de abajo de la imagen (bottom), que es también donde empieza el div que se despliega y lo guardo todo en una variable.
distanceItemBt = distanceItem + thumbSize;
Así calculo donde tiene que colocarse el scroll
placeScroll = distanceItemBt - headerHeight;
Después compruebo el tamaño del div desplegado, si es 0 es que no está desplegado y si es mayor es que está desplegado. Así
animatorSize = $('.animator').height();
Si el div no está desplegado y el header tiene un valor mayor que 75, muevo el scroll con este condicional
if ( animatorSize == 0 && headerHeight > 75 ) {
$('html, body').animate({"scrollTop": placeScroll},10);
}
Como se puede dar el caso de que, al pulsar en una imagen, ya esté desplegado algún div en ese momento, debo hacer un segundo cálculo para colocar el scroll ya que las distancias varían debido al div desplegado.
placeScrollNew = placeScroll - animatorSize;
Y para ese caso ejecuto este condicional
if ( animatorSize > 0 && headerHeight == 75){
$('html, body').animate({"scrollTop": placeScrollNew + headerHeight},10);
}
En esta ocasión le sumo, además, el tamaño del header, para que que lo tenga en cuenta al posicionar el scroll.
Siempre y cuando no haya ningún div desplegado, los cálculos salen perfectos, se ejecuta el primer condicional, y el scroll siempre se coloca bien. Pero cuando hay algún div desplegado (segundo condicional) entonces los cálculos no se cumplen y se coloca el scroll cada vez en un sitio distinto.
No tengo claro si es que se está guardando algún valor entre una acción y otra que afecta a la aritmética, pero el caso es que no consigo entender muy bien el comportamiento.
Me gustaría saber si alguien aquí me puede echar una mano con estos cálculos o indicarme donde puedo estar fallando.
Aquí tenéis el código completo para ver como funciona
https://jsfiddle.net/tanaan/xeb914og/
Muchísimas gracias a todos
Un saludo