Display none keep the container height

I have this navbar that shows up on scroll. https://relaxed-swirles-9b73a7.netlify.com/

I made it with intersectional observers and the problem is that If I add display none and I add display block on the class that I am adding to active the navbar it has this really weird interaction where when it hits the intersection class is activates the navbar and removes it really fast infinitely. It’s so fast that my phone can’t even record it hahaha.

But if I let the display block and I make the navbar activate with opacity everything works how I wanted. the problem is that I have that big gap where he nav bar normally sits if is not translatedY(-100%);

Any idea how I can fix it?

Some code here

[code]
.nav-2 {
position: sticky;
width: 100%;
height: 80px;
top: 0px;
z-index: 30;
background: white;
box-shadow: 0 1px 5px rgba(0,0,0,.3);

display: block;
opacity: 0;
transform: translateY(-100%);
transition: all 200ms ease;
}
.nav-2-scrolled {
opacity: 1;
transform: translateY(0%);
}
.nav-2 ul {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
[/code]

Also in #CSS _↴