Ando tratando de reproducir el efecto de la siguiente página web (una vez pasada la intro):
http://bearsears.patagonia.com/
De entrada para evitar susceptibilidades no tengo nada que ver con dicha página. No es publicidad. Me pareció buena para practicar.
Para quién no quiera perder tiempo visitándola lo explico "brevemente".
La página tiene un menú central basado en imágenes grandes y el típico botón "hamburguesa".
Cada imagen tiene a su vez submenús de imágenes del mismo tamaño que están ocultas.
Al hacer click en el menú hamburguesa las imágenes ocultas se hacen visibles a continuación de su "parent" en una única fila, por lo que el body debe crecer a lo ancho, que no la ventana del navegador.
La página, sin las sub-imágenes, en altura cabe de sobra en la ventana del navegador. De hecho no aparece la barra scroll vertical.
Le doy click a la hamburguesa.
Como mi página tiene de fondo un degradado en el body, me veo obligado a modificar el ancho de la página con el html
Código:
Y se despliegan las imágenes ocultas en pantalla en una sóla línea:$('html').width(2500)
Código:
Y ahora el problema.$('.jaoculta').css('display', 'block')
Resulta que aparece la barra de scroll vertical (sin necesidad, pues cabe de sobra) con un desplazamiento de unos 20 píxeles +-.
Compruebo las alturas del html, body y de las diferentes capas y son las mismas con o sin click hamburguesa.
Espero haberme explicado.
He probado cambiando el ancho del body y ocurre lo mismo y obviamente el degradado se repite en mosaico (pero el fondo no me preocupa siempre lo puedo cambiar).
¿A alguien se le ocurre porqué? ¿Estoy abordando mal el enfoque?
