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是这里最好的选择。