Using position sticky with child flex elements causes flicker so using position fixed and Javascript scrollbar position instead

I've got a navigation component that consists of a skinny banner (that should hide on toward scroll) and a main-nav that should then stick to top & and shrink.

I've followed the popular answer on using Intersection Observer: Event to detect when position:sticky is triggered

But the issue with that solution is that my child elements (flex) cause a flicker when going between the hidden and shown sticky banner. I can't remove those child elements for obvious reasons so instead I'm opting for a position: fixed on the main-nav with a top: 40px. This means the skinny-banner scrolls away as desired, but I need help getting the scrollbar position with Javascript, and then adding a class like (.isSticky when the skinny-banner is no longer there to ensure the main-nav sticks to the top).

.isSticky {
 top: 0;
 height: 66px;
}

body { 
 margin: 0;
 height: 200vh;  
}

.skinny-banner{
  background: lightblue;
  height: 40px;
  display: flex;
}

.nav-menu {
  display: flex;
}

.sticky-nav{
  position: fixed;
  top: 40px;                    


  background: salmon;
  transition: .1s;
}

/* styles for when the header is in sticky mode */
.sticky-nav.isSticky{
  top: 0;
  height: 66px;
}

<header>
   <div class="skinny-banner">Skinny banner that on scroll down disapears.</div>
   <div class="sticky-nav">Sticky Header that on scroll down sticks to top and shrinks in height when stuck</div>
</header>

I'm hoping to use a vanilla JS, HTML & CSS solution & want to maintain the HTML structure with a wrapping container with the skinny-banner and nav-menu as children.

from Using position sticky with child flex elements causes flicker so using position fixed and Javascript scrollbar position instead