5

私は自分のサイトにZurbFoundation4フレームワークを使用しています。スクロールして通過したときにページの上部に貼り付くヘッダーの下に配置されるナビゲーションバーが必要です。これは問題なく機能しますが、トップバーがページの上部に固定されたときにページのコンテンツが最大45ピクセルジャンプする点が異なります。効果はこのページで確認できますが、これは別のナビゲーション要素です：http: //foundation.zurb.com/docs/components/magellan.html

これを修正する方法はありますか、それともこのバグに対応するためにサイトのデザインを変更する必要がありますか？

ドキュメントはここにあります：http：//foundation.zurb.com/docs/components/top-bar.html

<div class="contain-to-grid sticky">
 <nav class="top-bar">
      <ul class="title-area">
        <!-- Title Area -->
        <li class="name">
          <h1><a href="/">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">
        <ul class="left">
          <li class="divider"></li>
          <li class="has-dropdown"><a href="/grid.php">Item 1</a>

            <ul class="dropdown">
              <li><label>Level One</label></li>
              <li><a href="#">Sub-item 1</a></li>
              <li><a href="#">Sub-item 2</a></li>
              <li class="divider"></li>
              <li><a href="#">Sub-item 3</a></li>
              <li class="has-dropdown"><a href="#">Sub-item 4</a>

                <ul class="dropdown">
                  <li><label>Level Two</label></li>
                  <li class="has-dropdown"><a href="#">Sub-item 1</a>

                    <ul class="dropdown">
                      <li><label>Level Three</label></li>
                      <li class="has-dropdown"><a href="#">Sub-item 1</a>

                        <ul class="dropdown">
                          <li><label>Level Four</label></li>
                          <li><a href="#">Sub-item 1</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Sub-item 2</a></li>
                      <li><a href="#">Sub-item 3</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Sub-item 4</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Sub-item 2</a></li>
                  <li><a href="#">Sub-item 3</a></li>
                  <li><a href="#">Sub-item 4</a>
                </ul>
              </li>
              <li><a href="#">Sub-item 5</a></li>
            </ul>
          </li>
          <li class="divider"></li>
        </ul>
        <!-- Right Nav Section -->
        <ul class="right">
          <li class="divider hide-for-small"></li>
          <li><a href="#">Item 2</a></li>
        </ul>
      </section>
    </nav>

4

4 に答える 4

11

これは、Foundation4のJavascriptでハードコードされた「機能」のようです。リンクのデフォルトの動作を単に防ぐのではなく、リンクを自動的ににリダイレクトし#ます。これにより、ブラウザはページの上部にジャンプします。これは意図的なもののようです（これについては後で詳しく説明します）。

今のところ唯一の選択肢は、トップバーコンポーネントを使用せず、他のより信頼性の高いFoundationコンポーネントを使用して独自のナビゲーションを作成することです。たとえば、クラスと、必要なすべてのメニュー項目を含む新しい要素を.sticky定義することの両方を使用して、独自のナビゲーションを簡単に構築できます。<nav><ul>

トップバーは、設計上非常に特殊な用途があります... [メニュー]をクリックすると、Javascriptが使用され、トップバーの下のオプションの単一列としてナビゲーションが表示されます。モバイルユーザーが多数のオプションをスクロールできるようにするために、これによりウィンドウがページの上部にジャンプしfixed、メニューを閉じるまで動作が削除されます。これは、トップバーがページの上部から始まる場合は十分に機能しますが、そうでない場合は深刻な影響があります（たとえば、ページの上部にスクロールすると、メニューが表示されなくなる場合があります）。

さて、これは純粋に意見です...しかし、私は実際にはFoundationのTopBar実装のファンではありません。ユーザビリティテストでは、モバイルメニューをフッターに配置し、アンカーでそれらにリンクする方が効果的でユーザーフレンドリーであることが示されています。.hide-for-smallデスクトップメニュー項目を非表示に.show-for-smallし、独自のカスタムのアンカーされた「メニュー」リンクを表示するために使用できます...そのメニューリンクは、フッターのモバイル固有のメニューに固定されます（これもで表示されます.show-for-small）。

簡単に言うと、トップバーは使いやすさの観点からはだらしなく、ユースケースでは（設計上）壊れています。独自のスティッキーメニューを作成することをお勧めします:-)

于 2013-04-01T23:08:54.130 に答える
6

この問題は修正されました：https ：//github.com/zurb/foundation/issues/1993

答え：

一番上にジャンプしたくない場合は、data-optionsで指定してください。

<nav class="top-bar" data-options="scrolltop: false">

または初期化時：

$(document).foundation('topbar', {scrolltop: false});
于 2014-04-30T10:29:34.977 に答える
2

不要な場合は、「スティッキー」クラスを削除してください。私のために働いた。

于 2013-08-20T19:41:51.803 に答える
1

このページ：https ：//github.com/jordanmerrick/foundation/commit/47391710c7b6d30ad54e50f3b2526cb8f6184be1

Foundation.topbar.jsで、トップバーがスティッキーかどうかに応じてbodyタグにパディングを追加するコードを見つけました。

if ($('.sticky').length > 0) {
   var distance = $('.sticky').length ? $('.sticky').offset().top: 0,
       $window = $(window);
      var offst = $('nav.top-bar').outerHeight()+20;
     (".sticky").after("<div class='top-bar-sticky-padding'></div>");
     $window.scroll(function() {
       if ( $window.scrollTop() >= ( distance ) ) {
          $(".sticky").addClass("fixed");

-$（'body'）。css（'padding-top'、offst）; }

      else if ( $window.scrollTop() < distance ) {
         $(".sticky").removeClass("fixed");

-$（'body'）。css（'padding-top'、 '0'）; }}）; }

私はJavaScriptウィザードではありませんが、.top-barの高さに設定する代わりに、.top-bar-sticky-paddingの値に直接設定するように見えます。オフセットは、次のコマンドで制御できます。トップバーのサイズのオフセットを強制する代わりに、メディアクエリ。

私が間違っている？「コアのハッキング」に神経質になっていますが、これで問題は解決したようです。

于 2013-08-08T16:27:36.423 に答える