Zurb基金會4滾動2 divs

Question

我使用Zurb基金會4爲一個網站。遇到

以下問題：

2格盒與文本內容，div.text_left有更多的內容，那麼div.text_right。

如果向下滾動並且達到了div.text_right的末尾，應停止div.text_right，只有div.text_left框應該進一步滾動。

任何人都知道解決方案嗎？

http://jsfiddle.net/robce/yrfB5/

下面是代碼：

<!-- Nav Bar --> 
<div class="contain-to-grid sticky"> 
    <nav class="top-bar"> 
     <ul class="title-area"> 
      <!-- Title Area --> 
      <li class="name"> 
       <h1><a href="#">Marimba </a></h1> 
      </li> 
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
     </ul> 

     <section class="top-bar-section"> 
      <!-- Left Nav Section --> 
      <ul class="left"> 
       <li class="divider"></li> 
       <li class="active"><a href="#">ACCOMODATION</a></li> 
       <li class="divider"></li> 
       <li><a href="#">ABOUT</a></li> 
       <li class="divider"></li> 
       <li><a href="#">ACTIVITIES</a></li> 
       <li class="divider"></li> 
       <li><a href="#">MOZAMBIQUE</a></li> 
       <li class="divider"></li> 
       <li><a href="#">CONTACT</a></li> 
       <li class="divider"></li> 
      </ul> 

      <!-- Right Nav Section --> 
      <ul class="right"> 
       <li class="divider hide-for-small"></li> 
       <li class="divider"></li> 
       <li class="divider show-for-small"></li> 
      </ul> 
     </section> 
    </nav> 
</div> 
<!-- End Nav --> 


<div class="row full"> 
    <div id="primary"> 
     <div class="large-8 columns text_left"> 
      <div class="panel"> 
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr..... 
       </p> 
      </div> 
     </div> 

     <div class="large-4 columns text_right"> 
      <div class="panel"> 
       <p>Lorem ipsum dolor... 
       </p> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

如果你不反對使用Javascript的解決方案，這裏有一些選擇：fixed div on bottom of page that stops in given place。

有一個人在這裏有一個Github插件，正是你在找什麼，而且其他人都有一些JS可以用於你想要的東西。

否則，我不確定基金會有你在找什麼。我之前和Foundation合作過，他們的JS插件似乎沒有這樣的東西。

看着你的小提琴，看起來你不能將position: fixed;應用到元素本身，因爲你根本無法滾動它。我認爲JS是這裏最好的選擇。