How to stop position fixed before footer?

Question

I have a floating box and I'd like to know how I can stop it from overlapping the footer div by stopping it on the main div where it is only allowed to go.

window.onload = function ()
{
    var scrolledElement = document.getElementById('scrolling_box');
    var top = scrolledElement.offsetTop;
    var listener = function ()
    {
        var y = scrolledElement.scrollTop || scrolledElement.scrollTop || window.pageYOffset;

        if (y >= top-25)
        {
            scrolledElement.classList.add('fixed');
        } else {
            scrolledElement.classList.remove('fixed');
        }
    };
    window.addEventListener('scroll', listener, false);
} 

I'd like for it to stop at the main div, that is as followed:

<div class="outer">

    <div class="main">

        <div class="left">

        </div>

        <div class="right">

            <div class="scrolling_box">
                the box that is scrolled goes right here
            </div>

        </div>

    </div>

    <div id="footer">
        Footer goes here
    </div>

</div>

I'd like it to be stopped at the main class, I have looked a lot of other tutorials and none that I could port it to plain javascript. I tried including the .stop() but it wound up being only for jQuery sadly. I could not replicated the issue in jsfiddle, sadly.

I tried using float:both, left and right but neither seemed to have worked at all.

Answer 1

Almost Solved Check for Demo

$(window).scroll(function(){
    var pos = $('#footer').offset();
    var top = pos.top;
     var pos1 = $('#scrolling_boxI').offset();
    var top1 = pos1.top
    //alert(top);
  if( $(window).scrollTop()<top-150-top1)
  {
    $("#scrolling_boxI").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
  }
});