Jquery Scroll between header and footer
<p>I'm trying to keep a div at the top of my page but, when I cross my point, I would like to stop scroll before another div..</p>

<pre><code>&lt;div class="my-top"&gt;&lt;p&gt;This is my top&lt;/p&gt;&lt;/div&gt;
    &lt;div class="big-one"&gt;
        &lt;div class="mini1"&gt;
            &lt;p&gt;TEST 1&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="mini2"&gt;
            &lt;div id="mini-mini2"&gt;
                &lt;p&gt;Need to scroll&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="my-footer"&gt;
        &lt;p&gt;This is my footer&lt;/p&gt;
    &lt;/div&gt;
</code></pre>

<p>Here is a fiddle => <a href="https://jsfiddle.net/2q773opz/3/" rel="nofollow noreferrer">https://jsfiddle.net/2q773opz/3/</a></p>

<p>When I scroll, my div go down but she can stop at the end of "mini2", she goes back to his top :(
What did I miss? Thanks for your help ^^</p>