1

私はウェブサイトにZurb Foundation 4を使用しています.すでに使用していますが、スティッキーまたは固定のトップバークラスを試したことはありません.

問題は、スティッキーまたは固定クラスをナビ ラッパーに設定すると、ブラウザのナビゲーション バーの高さが 2 倍になることです。（ドキュメント「スクロールしてもトップバーを固定したままにするには、div class="fixed" でラップする」ため、コンテナーを使用します）

そのクラスでトップバーの高さが変わる理由を知っている人はいますか? 本当に解決策がわかりません！

コードは次のとおりです。

<div class="contain-to-grid fixed"> 
      <nav class="top-bar">
         <ul class="title-area">
            <li class="name">
               <h1><a href="#">Title</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
         </ul>
       <section class="top-bar-section">     
         <ul class="right">
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
               <li><a href="#">Link 3</a></li>
               <li><a href="#">Link 4</a></li>
         </ul>
         </section>
      </nav>
   </div>
4

2 に答える 2

0

カスタム CSS で、次を追加します。

.row{
    padding-top: 50px;
}

.top-bar {
    position: fixed;
    width: 100%;
    z-index: 100;
}

これにより、コンテンツをその下で開始できるようにするための適切なパディングを備えた、スティッキー ヘッダーが作成されます。

いつものようにあなたのコンテンツを始めてください<div class="row">content ... </div>

参考： http: //foundation.zurb.com/templates.php#

于 2013-10-16T16:14:55.213 に答える
0

解決策を見つけました：

問題は.contain-to-gridクラスのラッパー div にあるようです。それを取り除くと、完全に機能する粘着/固定トップバーを使用できます。

そのクラスを追加すると、上部のバーが太くなります。デフォルトでは、次のことがわかりました。

.contain-to-grid { width: 100%; background: #111111; }
.contain-to-grid .top-bar { margin-bottom: 1.875em; }

だから私はオーバーライドをしました

.contain-to-grid .top-bar { margin-bottom: 0 !important; }

そして今、私のトップバーは粘着性があり、グリッドに順応し、再び細くなっています!

于 2013-10-17T08:10:15.983 に答える