Headroom

※Forge全件データの日本語検索サービスをご利用になりたい場合は、こちらまでお問合せください。

Forge英文サイト

更新日： 2017-03-28 バージョン： 1.0.0 作者： Daniel Martins Platform： DB： All スタック： All カテゴリー： Widgets

概要：

あなたのページに少し余裕を持たせましょう。ヘッダーは必要になるまで隠しましょう。

詳細：

これはどういうものなのか？ Headroom.jsは軽量で高性能なJSウィジェット（他の物には依存しません）で、ユーザーのスクロールに反応することができます。このサイトのヘッダーが実際に動いている例で、スクロールダウン時には視界から見えなくなり、スクロールアップ時にはまた見えるようになります。。なぜ使う必要があるのか？固定ヘッダーは、主要なナビゲーションをユーザーの近くに保つための一般的なアプローチです。これは、ユーザーがサイトを素早く見る為に必要な労力を軽減することができますが、問題もあります・・・大画面は通常は横長、つまり、横よりも縦の方がスペースが少ないです。したがって、固定ヘッダーはコンテンツ領域のかなりの部分を占めることがあります。小さなスクリーンは、通常、縦向きに使用されます。この結果、縦方向のスペースが増えますが、画面の全体的な高さを考えると、この意図的なサイズのヘッダーは依然として非常に魅力的です。 Headroom.jsでは、必要に応じて要素を視界に表示し、その事により他の時にはコンテンツに集中してもらえるようにできます。

[Overview]
Give your pages some headroom. Hide your header until you need it.

[Detail]
What's it all about? Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up. Why use it? Fixed headers are a popular approach for keeping the primary navigation in close proximity to the user. This can reduce the effort required for a user to quickly navigate a site, but they are not without problems… Large screens are usually landscape-oriented, meaning less vertical than horizontal space. A fixed header can therefore occupy a significant portion of the content area. Small screens are typically used in a portrait orientation. Whilst this results in more vertical space, because of the overall height of the screen a meaningfully-sized header can still be quite imposing. Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time. Sample: https://martinsda.outsystemscloud.com/Headroom_Sample Credits to: http://wicky.nillia.ms/headroom.js/

戻る