4

画面サイズが 940px 未満のときにナビゲーション バーを固定するには、何を変更する必要がありますか? 私はそれをレスポンシブにしたくありません。ブラウザ ウィンドウのサイズを 940px 未満に変更すると、スクロールバー x (下部スクロールバー) が表示されますが、右にスクロールすると、ナビゲーション バーの位置が固定されたままになり、一部のメニューが表示されません。

ツイッターフェイスブック

たぶん、いくつかの写真が私の問題を説明するでしょう。

4

2 に答える 2

3

これはCSSだけではできません。

あなたが与える例（Twitter）には、すべての画面サイズで固定位置と固定サイズのナビゲーションバーがあります。固定位置とは、スクロールバーがナビゲーションバーの位置に影響を与えないことを意味します。これが、x-スクロールバーを使用してナビゲーションバーの一部を表示できない理由です。ブラウザウィンドウの右端。

したがって、どちらかを選択する必要があります

  1. 固定位置、固定サイズのナビゲーション バーをユーザーがどれだけ下にスクロールしても上部に表示されるようにし、十分に小さい画面では水平方向にスクロールしてすべてを表示できないことを受け入れる、または
  2. さまざまな画面サイズに対応するように幅を調整する固定位置の流動サイズのナビゲーション バーを用意します。これにより、最初に水平方向にスクロールする必要性が軽減されることが期待されます。特に、コンテンツが 1 行に収まらない場合に垂直方向に拡大する場合はまた
  3. 固定されていない位置、固定サイズのナビゲーション バーを用意します。これは、水平スクロールには応答しますが、ユーザーがページを下にスクロールしても常に表示されるわけではありません。

position事実上、 x 方向と y 方向に一方向に仕事をすることはできません。

オプション 2 の意味を理解するには、CSS インスペクタを使用して Twitter ページで次のクラスを編集します。

.global-nav .container {
    width: auto;
    max-width: 865px;
}
.global-nav, .global-nav-outer {
    height: auto;
}

2 番目のセレクターは、コンテンツが 1 行に収まらない場合の垂直方向の流動性を実装します。

これらの変更を加えることで、オプション 3 の意味を理解できます。

.topbar {
    position: absolute;
    /* ... the rest as is */
}

編集

もちろん、CSS でできないからといって、まったくできないわけではありません。これは、あなたが言及したスクリプトを実装するjsfiddleです。これは、私が通常ブートストラップで使用する jQuery とは対照的に、MooTools を使用します。

フィドル: http://jsfiddle.net/uadDW/4/
フルスクリーン版で効果がよくわかる: http://jsfiddle.net/uadDW/4/show/

（私がこれを作ったベースフィドルを提供してくれた@Sherbrowに感謝します）。

于 2012-06-27T04:18:34.697 に答える
1

この同じ問題に遭遇し、提案された解決策にわくわくしましたが、自分のコードに実装するのに苦労しました (はい、noobie)。

ここで、コードの他の場所で必要な jquery.js との競合があることがわかりました。

http://jsfiddle.net/uadDW/83/

/* code as before .. only added jquery.js link */

上記のフィドルで外部リソースから jquery.js を削除すると、元の望ましい動作が得られます。ネズミ！

于 2013-07-31T02:08:12.900 に答える