Bootstrap のドキュメントサイトでは、非常に興味深いナビゲーションの概念を使用しています。
ページごとのナビゲーションバーがあり、下にスクロールするとページの上部に固定され、ページの現在の領域が強調表示されます。
ページの上部に移動したときのナビゲーションバーのスクリーンショットを次に示します。
赤い四角形はデザインの一部ではなく、私が参照しているナビゲーションバーを強調表示するために使用されます。
これは同じページのスクリーンショットですが、少し下にスクロールされています。
ナビゲーションバーがページの幅全体に突然広がり、常に上部に固定されることに注意してください。
このナビゲーションの概念に名前はありますか、ある場合、それは何と呼ばれますか?
このパターンには十分に確立された名前はありません。 「スティッキーヘッダー」という用語は、通常、最初から固定されているインターフェイス要素に適用されます。
一部のナビゲーション要素が関連しているときに「スティッキー」になるという事実は、微妙ですが興味深い違いです。このようにして、スクロールにもかかわらず視覚的な階層が維持されます。
Gilles Vandenoostendeは、このパターンを Dynamically Fixed UI と呼びました。最近では、この動作のために、「sticky」というCSSの位置 提案され、Webkitでサポートされています が使用されています。
このメカニズムは、一部のモバイルプラットフォームのリストのグループ見出しにも適用されます。 Android連絡先アプリはこのアプローチを使用します:
彼らはそれを ScrollSpy と呼んでいます。
ScrollSpyプラグインは、スクロール位置に基づいてナビゲーションターゲットを自動的に更新するためのものです。
他の人が言ったように、このUIパターンの名前は合意されていません。 「スティッキーエレメント」と「ダイナミックフィックスエレメント」に加えて、私が見つけた名前は「固定フローティングエレメント」でした。
これを追加します。このパターンはツールバーとナビゲーションに最も役立つと考えられていますが、他のタイプのコンテンツに使用することを妨げるものはありません。必須ではないナビゲーション、広告、またはページのメインテキストコンテンツ(たとえば、デザイナーや写真家のポートフォリオなどのメディアが豊富なページ)に使用されるのを見てきました。
「Google」メニューバーのバリエーションのように見えます。イベントを開始するアンカーで上部に取り付けられています。取り付けが簡単(CSS)のナビゲーションバー。イベント用のjQueryツールでしょうか?
ビューポートの上部に「くっつく」全幅のナビゲーションバーのデザインパターンの名前を尋ねている場合、合意された名前が1つあるかどうかはわかりません。しかし、私は一般的にそれらを「固定ナビゲーションバー」または「固定メニューバー」と呼んでいます。