0

我正在使用 Zurb Foundation 4 作为网站。

遇到以下问题：

2个带有文本内容的div框，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>
4

1 回答 1

0

如果您不反对使用 Javascript 作为解决方案，这里有一些选项：fixed div on bottom of page that stop in given place。

这里有一个人有一个 Github 插件，它有你正在寻找的东西，而且其他人都有一些 JS 可以用于你想要的东西。

否则，我不确定 Foundation 是否有您正在寻找的东西。我以前与 Foundation 合作过，他们的 JS 插件似乎没有这样的东西。

查看您的 Fiddle，您似乎无法将其应用于position: fixed;元素本身，因为您根本无法滚动它。我认为 JS 是这里最好的选择。

于 2013-10-31T21:20:54.263 回答