I have a grid layout which has three fixed bars(red top bar, black right and bottom bar), flex banner in sticky grid (blue section, also shrinks) and two grid sections(white and lightgray areas in middle of page). When one of green square information buttons which are in white section, are clicked, a information content pops up in lightgray section.

I got a window.onscroll = function() {scrollFunctionTopPos()}; to handle that shrinking of banner(blue section) and position of division in lightgray section.

1. If you scroll down first and popup the div by clicking buttons, then if you scroll up, banner and graysection are blended in the beginning, later, they get right positions.

   Should I use something like "async func" tricks/methods for that cases so "div" in graysector is positioned first, then banner unshrinks ?

2. When I failed, as I mentioned earlier, I tried to use multiple sticky positions(i mean sticky blue banner and sticky light graysection) so i would not need to use a function to position "div" properly but it did not worked. Btw, The function is below.

3. What do you think about making lightgray section fixed and use Element.getBoundingClientRect() to change position of that fixed section relatived to other sections or maybe HTML or body content?

JS fiddle:

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";
  }
}