1

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

1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat. Commented el 27 feb. 2017 a las 8:14

1 respuesta 1

0

te lo he solucionado asi:

$('html, body').animate({"scrollTop": thumbSize + distanceItem - headerHeight},10);

El tamaño de la imagen + la distancia de esa imagen al top - el tamaño del header. Creo que se escapan unos bordes, por eso es mejor usar el outerHeight() o innerHeight()

7
  • Gracias @Franklin'j Gil'z. Te agradezco mucho la ayuda, de veras. Sin embargo, es lo mismo que tenía yo pero en lugar de sumar el headerHeight tú se lo restas no? Puedes hacer los cambios que quieras en el mismo fiddle darle a update y pasarme la url. He añadido tu código y queda así jsfiddle.net/tanaan/xeb914og/2 ¿lo he entendido bien? ¿a qué te refieres con el outerHeight()? A la hora de recoger el tamaño de thumbSize = $(this).height(); y headerHeight = $('header').height(); Gracias de nuevo por tu ayuda y tu tiempo.
    – tanaan
    Commented el 25 feb. 2017 a las 22:28
  • Para que te voy a pasar el codigo si ya lo tienes? $(this).height(); retorna el height del elemento, pero creo que cuando tienes margenes y bordes, no te suma los bordes... entonces usa $(this).outerHeight(); o $(this).innerHeight(); no me acuerdo cuales son las caracteristicas especificas de cada uno pero investigar un poco en la documentacion ayuda bastate!! si te ayudé dale flechita arriba ;) Commented el 25 feb. 2017 a las 22:35
  • Sí, es outerHeight(); a lo que te refieres. No entendía donde sugerías utilizarlo. Te comentaba lo de hacer los cambios directamente sobre el código para evitar que yo lo malinterprete y así poder ver los cambios que realizas sobre las versiones anteriores y que yo no esté copiando y pegando algo en el sitio equivocado y obtener algo distinto a lo que tú has creado. Entonces el código que sugieres es este jsfiddle.net/tanaan/xeb914og/2 ?
    – tanaan
    Commented el 25 feb. 2017 a las 22:40
  • Si utilliza ese código, solo modifique una linea Commented el 25 feb. 2017 a las 22:43
  • Parece que funciona un poco mejor que el que tenía yo, desde luego. Aunque es cierto que hay algunos px por ahí perdidos que están afectando a los cálculos, voy a probar con .outerHeight()ya que puede estar ahí el problema como comentas. Postearé aquí la respuesta si consigo solucionarlo del todo, no te quiero molestar más. Muchísimas gracias por tu tiempo, amigo.
    – tanaan
    Commented el 25 feb. 2017 a las 22:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.