-1

ファンデーション 5 でサイトを作成しています。セカンダリ ナビゲーション バーがプライマリ ナビゲーションの下部に到達するまでページと共にスクロールし、ユーザーがスクロールしている間、所定の位置にスナップして「固定」するページがあります。そのポイントに到達すると、トップバーに効果的に「固定」が追加されます。この機能は、スティッキー トップバー セクションの基本ドキュメントで説明および実演されています (次のリンクを参照)。

http://foundation.zurb.com/docs/components/topbar.html

問題: 上記のリンクの作業例からスティッキー トップバー コードを直接コピー アンド ペーストしても、この動作をサイトに実装できません。トップバーの他のすべての要素が機能しており、コンソールにエラーは表示されません。私はplunkrで問題を示しました：

http://embed.plnkr.co/cRdYV5tobUZsd6q2NQxT/preview

問題を理解するのを手伝ってください。前もって感謝します。

仕様:

Foundation バージョン: 5.5.0 jQuery: 2.1.0

//TOP-BAR CODE, SAME CODE AS IN PLUNKR
<div class="large-12 columns">
    <div class="sticky">
        <nav class="top-bar" data-topbar="" role="navigation">
            <ul class="title-area">
                <!-- Title Area -->
                <li class="name">
                  <h1><a href="#">Sticky Top Bar</a></h1>
                </li>
                <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
            </ul>      
            <section class="top-bar-section">

                <!-- Right Nav Section -->
                <ul class="right">
                  <li class="divider hide-for-small"></li>
                  <li><a href="#">Main Item 1</a></li>
                </ul>
            </section>          
        </nav>
    </div>
</div>

アップデート

plunkr を適切なリンクで更新: http://plnkr.co/edit/8OPKh2sbSn6iq5aN6HF0

私の問題は私が電話していた場所でした

$(document).foundation()

これはAngularアプリケーションであるため、最終的に呼び出すことになりました

app.run

働いた。

4

3 に答える 3

0

plunkr サイトに問題があります。ページが読み込まれるときに top-bar.js ファイルが読み込まれないため、この例は機能しません。ブラウザー コンソールにエラーが表示されます - リソースの読み込みに失敗しました: サーバーは 404 (見つかりません) のステータスで応答しましたhttp://run.plnkr.co/plunks/cRdYV5tobUZsd6q2NQxT/top-bar.js リンクを更新する必要がありますtop-bar.js ファイルがロードされていることを確認します。

財団のWebサイトには、foundation.jsファイルの後にfoundation.topbar.jsを追加するだけと書かれています。マークアップは次のようになります。

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();
  </script>
于 2015-03-08T08:15:50.710 に答える