остановка прокрутки внутри фиксированного div

Question

У меня есть 2 divs (один фиксированный, другой - относительный) Я выполнял поведение прокрутки внутри фиксированного ... прокручивая вместе со страницей. То, что я хочу сделать больше, - это когда div внутри фиксированного прокручивается вниз, это должно прекратить прокрутку, только страница должна продолжать прокрутку. Я не знаю, был ли я очень ясен, поэтому я создал 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> 

Любая помощь более чем приветствуется. Благодаря !!! пс. X12 должен придерживаться конца синей области.

Answer 1

Если я правильно подхожу, сделайте так, чтобы top имеет максимальное значение $('#filters').height()-$('#leftDiv').height(), до которого прокручиваются фильтры. Кроме того, чтобы сделать его быть в состоянии изменить направление изящно, а не устанавливать маржу #filters равной прокрутки сверху, мы должны вместо увеличения и уменьшения значения, как мы прокручиваем

$(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/