如何使用頁面滾動元素，但將其限制在其父DIV中？

我使用這裏介紹的方法：http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/如何使用頁面滾動元素，但將其限制在其父DIV中？

起初，我能得到的一切工作（目前的CDN加載jQuery的），但滾動到頁面底部時，側邊欄元素進行向下滾動，這使得網頁不再，然後它再次向下滾動創建一個無限滾動。

我想限制邊欄到父元素 - 在這種情況下，主容器。當元素碰到這個div的底部時，我希望它停止滾動。我試圖在這裏操縱答案：Jquery Scrolling div - Prevent from entering site footer但很少成功。任何線索？

#HTML Structure 

<!DOCTYPE html> 
<html> 
<body> 
    <div id="container">  
     <div id="content-container"> 
      <script> 
       $().ready(function() {  
        var $scrollingDiv = $("#sidebar"); 

        $(window).scroll(function(){    
         var y = $(this).scrollTop(), 
          maxY = $('#secondary-container').offset().top, 
          scrollHeight = $scrollingDiv.height(), 
          offset = 30; 

         if(y< maxY-scrollHeight-offset){ 
          $scrollingDiv 
          .stop() 
          .animate({"marginTop": ($(window).scrollTop()+offset) + "px"}, "slow");   
         }  
        }); 
       }); 
      </script> 

      <h1>header</h1> 
      <div id="intro-text"> 
       <h3>Sub header</h3> 
       <p> 
        Blah blah blah 
       </p> 
      </div> 
      <div id="main-container"> 
       <div id="main"> 
<!-- Repeat x times --> 
        <div class="listing"> 
         <p class="listing-description"> 
          Blah 
         </p> 
         <p class="listing-response"> 
          Blah 
         </p> 
         <br /> 
         <a href="#">Linky</a> 
        </div> 
<!-- End repeat --> 
       </div> 
       <div id="sidebar"> 
        <h3>Floaty box content</h3> 
        Blah 
       </div> 
      </div> 
      <div id="secondary-container"> 
       <div id="secondary-left"> 
       </div> 
       <div id="secondary-right"> 
       </div> 
      </div> 
      <div id="footer"> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 


# CSS 


#container { 
    padding:10px; 
    margin:10px; 
    margin:auto; 
    width:1000px; 
    overflow:auto; 
} 


.listing { 
    margin-bottom:5px; 
    position:relative; 
    clear:both; 
    overflow:auto; 
    width:800px; 
} 

.listing-description { 
    float:left; 
    width: 49%; 
    font-weight:bold; 
} 

.listing-response { 
    float:left; 
    width:50%; 
    padding-left:5px; 
} 

#main-container { 
    clear:both; 
    overflow:auto; 
} 

#main { 
    float:left; 
} 

#sidebar { 
    float:left; 
    padding-left:10px; 
} 

#secondary-container { 
    clear:both; 
    overflow:auto; 
    border: 1px solid; 
} 

#secondary-left { 
    width:50%; 
    float:left; 
} 

#secondary-right { 
    width:50%; 
    float:left; 
}

來源

2011-10-06 FiveOhOne

你可以在這個小提琴中說明問題嗎？ http://jsfiddle.net/MWzCS/1/ –

http://jsfiddle.net/MWzCS/2/ - 這說明了這個問題，但你必須使結果框高度很小（100-150px）到讓滾動實際觸發。我可以用更多的填充物填充它，但由於Safari瀏覽器的雙指背部/滾動動作，我已經失去了3次...... :( – FiveOhOne

我已經結束了與此：

$(window).scroll(function(){    
    var y = $(this).scrollTop(), 
    maxY = ($('#secondary-container').offset().top - $('#sidebar').height() - 110), 
    scrollHeight = $scrollingDiv.height(); 

    if(y< maxY-scrollHeight){ 
    $scrollingDiv 
    .stop() 
    .animate({"marginTop": $(window).scrollTop() + "px"}, "slow");   
    }  
});

減去美星變量#sidebar身高，再加上神奇的110號。我不是100％的魔術數字來自哪裏，但玩過它後，它符合我的需求。你的旅費可能會改變。

來源

2011-10-07 08:28:37 FiveOhOne

如何使用頁面滾動元素，但將其限制在其父DIV中？

回答

相關問題