Question

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

遇到以下问题：

包含文字内容的2个div框，div.text_left比div.text_right有更多内容。

如果我向下滚动并到达div.text_right的结尾，则div.text_right应该停止，只有div.text_left框应该进一步滚动。

有谁知道解决方案？

以下是代码：

    <!-- 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。

否则，我不确定基金会有你想要的东西。我之前和基金会合作过，他们的JS插件似乎没有这样的东西。

看着你的小提琴，似乎你不能将position: fixed;应用于元素本身，因为你根本无法滚动它。我认为JS是最好的选择。

Zurb Foundation 4滚动2个div

1 个答案: