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 を使用することに反対でない場合は、いくつかのオプションがあります。ページの下部にある特定の場所で停止する固定 div。

ここには、まさにあなたが探しているものを備えた Github プラグインを持っている人がいます。さらに、他のすべての人は、あなたが望むものに使用できる JS をいくつか持っています。

そうでなければ、Foundation があなたが探しているものを持っているかどうかわかりません。私は以前 Foundation と仕事をしたことがありますが、彼らの JS プラグインにはこのようなものはないようです。

Fiddle を見るとposition: fixed;、要素をまったくスクロールできないため、要素自体に適用できるようには見えません。ここではJSが最良の選択肢だと思います。

于 2013-10-31T21:20:54.263 に答える