stop scrolling inside fixed div

Question

I have 2 divs (one is fixed, the other one is relative) I was implementing a scrolling behavior inside the fixed one ... scrolling along with the page. What i want to do more is when the div inside fixed one is scrolled to the bottom this should stop scrolling, only the page should continue scroll. I do not know if i was very clear so that's why i create a fiddle.

<style>

body {
  background-color:#dddddd;
  margin: 0;
}

#mainDiv{
    top: 120px;
    max-width: 1024px;
    margin:0px auto;
    background-color:#fff;
}

#leftDiv{
    width: 30%;
    float: left;
    background-color: #DBEAED;
    height: 300px;
    top: 1em;
    z-index: 999;
    position: fixed;
    overflow: hidden;
}
#rightDiv{
    width: 68%;
    padding-left: 2%;
    float: right;
    background-color: #FBE9DD;
}
#filters{
    display: inline-block;
}
</style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
 $(document).ready(function () {
            window.onscroll = scrollFunction;
            function scrollFunction() {
                var doc = document.documentElement, body = document.body;
                var top = (doc && doc.scrollTop || body && body.scrollTop || 0);;

                $('#filters').css("margin-top", -top);
            }
        });
 </script>
<div id="mainDiv">
    <div id="leftDiv">
        <div id="filters">
            <p>XX 1</p><p>XX 2</p><p>XX 3</p><p>XX 4</p><p>XX 5</p><p>XX 6</p><p>XX 7</p><p>XX 8</p><p>XX 9</p><p>XX 10</p><p>XX 11</p><p>XX 12</p>
        </div>
    </div>
    <div id="rightDiv">
        Here is PLP page
        <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
        <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
        <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    </div>
</div>

Any help is more than welcome. Thanks !!! ps. X12 should stick to the end of blue area.

Answer 1

If I undersand correctly, make it so that top has a maximum value of $('#filters').height()-$('#leftDiv').height(), which is as far as you want filters to scroll. Further, to make it be able to change directions gracefully, rather than set the margin of #filters equal to scroll top, we have to instead increment and decrement the value as we scroll

$(document).ready(function () {
    window.onscroll = scrollFunction;
    var filterMargin = 0;
    maxTop = $('#filters').height() - $('#leftDiv').height();
    lastTop = 0;

    function scrollFunction() {

        var doc = document.documentElement, body = document.body;
        var top = (doc && doc.scrollTop || body && body.scrollTop || 0);

        filterMargin = -parseInt($('#filters').css("margin-top"));

        var diff = top - lastTop;

        filterMargin += diff;
        //make sure the margin value stops when the scrolling stops,
        //otherwise the scrolling physically stops but the value keeps growing
        filterMargin = filterMargin < 0 ? 0 : filterMargin;
        filterMargin = filterMargin > maxTop ? maxTop : filterMargin;
        console.log(top, maxTop, filterMargin, top - lastTop);
        $('#filters').css("margin-top", -filterMargin + 'px');
        lastTop = top;
    }

});

Fiddle: http://jsfiddle.net/nfp6fhg6/5/