在固定div内停止滚动

Question

我有2个div（一个是固定的，另一个是相对的） 我在一个固定的内部实现了滚动行为...与页面一起滚动。我想要做的更多的是当固定的一个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> 

任何帮助都是值得欢迎的。谢谢 ！！！ ps。 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; 
    } 

}); 

小提琴： http://jsfiddle.net/nfp6fhg6/5/