3

このサイト ( http://halfcreative.themes.bitfade.com/ )にあるナビゲーション バーによく似た width:100% ナビゲーション バーを実装しました。

私のナビゲーション バーは、ナビゲーションがページの一番上に到達するとスティッキーになります。これは、Anthony Garand の sticky.js プラグインによって非常にうまく実装されています。問題はありません。

ただし、ナビゲーションが「スティッキー」になっているときにブラウザーのサイズを変更すると、幅が失われ、100% のスタイルが失われ、応答しなくなるという問題が発生します。下にスクロールして sticky.js をアクティブ化していない場合は応答します。

JSFiddle をセットアップしました (以下のリンク)。なぜこれが起こっているのですか？

http://jsfiddle.net/shRzE/1/

HTML マークアップの一部

<nav class="nav" id="sticky-navigation">

            <div class="navigation inner">
                <ul>
                    <li><a rel="competition" href="">Competition</a></li>
                    <li><a rel="worldbid">The Bid</a></li>
                    <li><a rel="logistics" href="">Logistics</a></li>
                    <li><a rel="workflow" href="">Workflow</a></li>
                    <li><a rel="lens" href="">Lens to Living Room</a></li>
                    <li><a rel="build" href="">The Build</a></li>
                </ul>
            </div>
        </nav>

注：「結果」の四角をできるだけ大きくすると、問題が最もよくわかることがわかりました。

  1. 半分の領域が赤く、半分の領域が黒くなるまで下にスクロールして、メニューが画面の中央に垂直に表示されるようにし、「結果」ボックスのサイズを変更して、ナビゲーションが 100% でうまく機能することを確認します。

  2. ナビゲーションがウィンドウの上部にくっつくまでスクロールし続けます。次に、「結果」ボックスのサイズを再度変更して、サイズが適切に変更されていないことを確認します。

注: Bootstraps Affix も実装しましたが、まったく同じ問題がありました。

4

2 に答える 2