Tengo un diseño de cuadrícula que tiene tres barras fijas (barra superior roja, barra negra derecha e inferior), banner flexible en cuadrícula adhesiva (sección azul, también se encoge) y dos secciones de cuadrícula (áreas blanca y gris claro en el medio de la página). Cuando se hace clic en uno de los botones de información cuadrados verdes que se encuentran en la sección blanca, aparece un contenido de información en la sección gris claro.
Obtuve una window.onscroll = function() {scrollFunctionTopPos()}; para manejar la reducción del banner (sección azul) y la posición de la división en la sección gris claro.
Si primero se desplaza hacia abajo y aparece el div haciendo clic en los botones, luego, si se desplaza hacia arriba, el banner y la sección gris se combinan al principio, luego, obtienen las posiciones correctas.
¿Debería usar algo como trucos/métodos de "función asíncrona" para esos casos, de modo que "div" en el sector gris se posicione primero, luego el banner se desencoge?
Cuando fallé, como mencioné anteriormente, traté de usar varias posiciones fijas (me refiero a un banner azul pegajoso y una sección gris clara pegajosa) por lo que no necesitaría usar una función para colocar "div" correctamente, pero no funcionó. Por cierto, la función está debajo.
¿Qué piensa acerca de hacer que la sección gris claro sea fija y usar Element.getBoundingClientRect() para cambiar la posición de esa sección fija en relación con otras secciones o tal vez HTML o contenido del cuerpo?
violín JS:
https://jsfiddle.net/GrayCollar/odnhgkpx/26/
function scrollFunctionTopPos(){ if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) { scrollFunction_40_1000(); document.getElementById("questioninfoDiv").style.top = "11vw"; } else { scrollFunction_0_39(); document.getElementById("questioninfoDiv").style.top = "25vw"; } }