sticky div that disappers at the footer

I build a newsletter sub box that is sticky to the bottom. I have at the bottom of the Site a static newsletter sub box. I want that when my sticky one reaches the one at the bottom that it floats under it and than disappers if its fully covered. I think for the solution I must use JavaSkript but I have no experience with it. It would be nice if someone can help me.

This is basicly my sticky newsletter sub box:

<div id="newsletter" class="m-newsletter_störer">
   <div class="m-newsletter_störer-container"> </div>
</div>

and the css:

.m-newsletter_störer {
    background:green;    
    max-width: 900px;
    margin: auto;
    position: sticky;
    bottom: 0;

&-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;

    @include media('>phone') {
        padding: 3rem 1rem;
    }
}

my static sub box:

<div id="newsletter" class="m-newsletter">
   <div class="m-newsletter-container"> </div>
</div>

and the css:

.m-newsletter {
    background: $green;

&-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;

    @include media('>phone') {
        padding: 3rem 1rem;
    }
}

Also I want that my sticky sub box appers after 10s on the page.

If you need anything else to help write a comment.