Div sliding down menu

Well, this is actually a complicated problem, the default behavior of a header is simple, it gets in front of everything, however I want to put a div that will overlap it, putting a blur on the page, my goal is for the header to be behind of this div.

.body{
min-height: 2000px;
}

.overlay{
    background-color: rgba(126, 246, 53, 0.50);
    z-index: 1050;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
}

.overlayDiv{
    background: white;
    z-index: 1051;
    margin-top: 100px;
    position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Header</a>
</nav>
  
<div class="body">

<div class="overlayDiv col-8 offset-2">
  <h1>That's divs on top of the page</h1>
</div>

<div class="overlay"></div>
  </div>

As you can see in the example, overlayDiv is above the overlay, which is what I want, but it goes over the menu, what I want is for the menu to be over it even being opaque, would that be possible?

Edit:

I would like to do something rather complicated, I will explain otherwise to try to clarify.

The top div has to go under the header when it gets there, and fade in behind it partially.

so it looks like it's entering the page just below the header, I thought of going to cut the height of her, but the content is not getting the way desired, example: cutting the text

from Div sliding down menu