Jquery - Hide a Div(A) when the page is scrolled to the start of another div(B) which have a ID

Question

There is a Fixed Div(A) at the bottom, when the page scrolls to the footer which have a id="Footer", the Div(A) Should hide.

        .fixDiv {
            padding: 10px;
            background: yellow;
            position: fixed;
            bottom: 5%;
            left: 50%;
            transform: translate(-50%, 0);
        }
        #div1,
        #div2,
        #div3 {
            height: 500px;
        }
        #footer {
            height: 100px;
            background: red;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="fixDiv">HELLO</div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="footer"></div>