在固定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/