1

Zurb fdn6 テンプレートの cli インストールで Magellan を使用しようとしています。ページは正常に実行されていますが、Magellan はスティッキー ナビゲーションでは機能せず、次のコンソール エラーがスローされます。
Uncaught TypeError: Cannot read property 'top' of undefined

DevTools でソースを表示すると、attr が値を登録していることがわかり、上下にスクロールするとクラスがアンカーに適用されるため、 Magellan が登録しているように見えます。data-stickyactive

ただし、登録されていないクラスは次のとおりです。is-at-top is-stuckこれらが「固執」する原因のようです。それらは Zurb ドキュメントの例に表示されます。

app.jsI haveで$(document).foundation();ページが実行されると、Magellan モジュールが実際にロードされていることがわかります。しかし、粘着性のあるナビゲーションはウィンドウの上部にくっついていません。このセットアップでは機能しません。

Zurb Fdn Magellan docsの次の標準的な例を使用しました。

<div data-sticky-container>
    <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-top-anchor="topAnchorExample" data-btm-anchor="bottomOfContentId:bottom">
        <nav data-magellan>
            <ul class="horizontal menu expanded">
                <li><a href="#first">First Arrival</a></li>
                <li><a href="#second">Second Arrival</a></li>
                <li><a href="#third">Third Arrival</a></li>
            </ul>
        </nav>
    </div>
</div>

他の SO の例が修正されているのを見たことがありますが、それらはすべて Zurb テンプレート以外のビルドを使用しているようで、通常は標準<script src="xyz">呼び出しを介してプラグインをロードしていました。

このZurbテンプレートの例で何が起きているか知っている人はいますか?

4

1 に答える 1

0

F5 とは異なり、Foundation 6 で要素を粘着性にするのは少しトリッキーで、率直に言ってイライラします。最初の試みでそれを取得するだけではありません。

F6 では、マゼランまたは任意の要素を粘着性にするには、粘着性を有効にするための基準点が必要です。

この場合、divIDtopAnchorExampleを持つルートを作成してから、マゼラン生成コードの次のセットを記述する必要があります。

これをやってみてください：

    <div id="topAnchorExample">
     <div data-sticky-container>
      <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-top-anchor="topAnchorExample" data-btm-anchor="bottomOfContentId:bottom">
       <nav data-magellan>
         <ul class="horizontal menu expanded">
            <li><a href="#first">First Arrival</a></li>
            <li><a href="#second">Second Arrival</a></li>
            <li><a href="#third">Third Arrival</a></li>
         </ul>
       </nav>
      </div>
     </div>
    </div>

そして、インライン CSS については言及しないようにしてください - width:100%。私はあなたがそれを世話すると思います。

于 2016-07-16T13:42:47.483 に答える