How to Create a Sticky Header that Responds to Scrolling

多くのモバイルアプリで sticky header の体験が使われていることに気づいたかもしれません。たとえば Web ブラウザでは、下方向にスクロールするとヘッダーと周囲のボタンがすっと引っ込み、上方向にスクロールすると再び滑り込むように戻ってきます。この体験により、写真のフィードでも、興味をそそるブログ記事でも、あるいは買い物中に閲覧するアイテム一覧でも、ユーザーはページに完全に没入できます。

下方向にスクロールしている間にヘッダーを一部（または完全に）隠すことで、画面上のコンテンツをより多く見せられます。これが、この体験をとても心地よく、人気のあるものにしている理由です。さらに素晴らしいのは、ProtoPie でこのリアルな体験を作るのがいかに簡単かということです。必要なのは、スクロール方向を確認するための 条件 だけです。ProtoPie に標準搭載されている 数式 と 条件分岐 機能のおかげで、この体験をすぐに完成させることができます！

概要

• 学べること

• スティッキーヘッダーを作成するためのステップバイステップガイド

• ヒントとコツ

• これで完了です！ スティッキーヘッダーをプロトタイプ化できました

学べること

1. スクロール可能なビューを作るためにスクロールコンテナを作成する

2. スクロールコンテナのスクロールプロパティを検出する

3. $touchVelocityY > 0 と $touchVelocityY < 0 の数式を使って、condition とスクロール方向を確認する

4. スクロール方向に応じて別々のインタラクションを追加する

最後には、こんなものを作れるようになります！

スティッキーヘッダーを作成するためのステップバイステップガイド

1. スクロール可能なビューを作るためにスクロールコンテナを作成する

ここでは、スクロールを有効にした基本ページを作成します。

1. ツールバーから Container に移動し、Scroll Container を選択します。これでスクロールが有効なコンテナが作成されます。このコンテナ名を "Scroll" に変更しましょう。こうしておくと、今後コンテナを見つけやすくなります。

2. コンテナ Scroll の角をドラッグして、画面全体を覆うのに十分な大きさになるまで拡大します。あるいは、サイズに 393 x 852 を入力し、位置を 0,0 に設定しても構いません。スクロール検出はコンテナが存在する場所でしか起こらないため、画面に合わせてコンテナを拡大する必要があります。この例ではフルスクリーンを使用します。

3. layers panel で Scroll をドラッグし、Card list レイヤーのすぐ上に来るように並べ替えます。これにより、カードが表示されていない場所での意図しないタップを防ぎやすくなります。

4. 次に、layers panel 内で Card list レイヤーを Scroll の中へドラッグします。これが、Card list レイヤーをスクロール可能にする最後のステップです。

5. ツールバーの Preview を押して試してみましょう。

2. スクロールコンテナのスクロールプロパティを検出する

このステップでは、シーン内でコンテンツがスクロールされるたびにインタラクションが動作するようになります。

　1. インタラクションパネルで Add Trigger をクリックし、Detect を追加します。トリガーのプロパティパネルで、選択されているレイヤーが Scroll であることを確認し、デフォルト値を X から Scroll に変更します。

• 値を Scroll に変更すると、選択したレイヤーの scroll 位置の変化をトリガーが検出できるようになります。もし代わりに X を選んでいたら、選択したレイヤーの X 位置の変化を検出します。しかし、レイヤー **Scroll ** の X 位置はまったく変化していないので、Detect トリガーは何の反応も返しません。

3. スクロール方向を確認するために条件と数式を使う

レイヤー Scroll でスクロールが発生したことを検出できるようになったので、スクロール方向—上方向と下方向—に応じて異なる反応を出せるよう、条件を設定します。

1. インタラクションパネルで、Detect トリガーの下にある + を押して新しいレスポンスを追加し、Condition を選択します。

2. 条件のプロパティパネルで、レイヤーのドロップダウンをクリックし、Formula に変更します。

　3. 数式バーをクリックし、**fx ** をタップして数式ヘルパーを表示します。次を入力: $touchVelocityY

$touchVelocityY は、移動中の指（またはマウス）によるタッチの速度（Y 軸方向）を返します。そのため、どちらの方向 に動いているかも判断できます。たとえば、下方向へのスクロールでは値が < 0 になり、上方向へのスクロールでは > 0 になります。

$touchVelocityY は画面全体のタッチをチェックします。

4. スクロール方向に応じて別々のインタラクションを追加する

1. 最初の条件では、コンテンツが下方向にスクロールされているときのインタラクションを設定します。条件のプロパティパネルで、<（より小さい）を選択し、値を 0 に設定します。インタラクションパネルには $touchVelocityY < 0 という条件が表示されます。これは、この条件の下にあるすべてのレスポンスが、タッチ速度が負のとき、つまり下方向にスクロールしているときに動作することを意味します。

2. インタラクションパネルで Detect の下の + をクリックし、Move レスポンスを追加します。tabBar レイヤーを選択し、Y 軸の位置を 852 へ Move To します。X 座標は空欄のままで構いません。これで、下方向にスクロールしたときに tabBar レイヤーが画面の下部へ移動します。

3. Header レイヤーも移動させましょう。インタラクションパネルで Detect の下の + をクリックし、別の Move レスポンスを追加します。今度は Header レイヤーを選択し、Y 軸の位置を 0 へ Move To します。これで、下方向にスクロールしたときに Header レイヤーが画面の上部へ移動します。

最後に、上方向にスクロールしたときに 2 つのレイヤーを元に戻したいと思います。Detect の下の + をクリックして、別の Condition を追加します。もう一度 $touchVelocityY を入力します。ただし今度は > を選び、値を 0 に設定します。

インタラクションパネルには、$touchVelocityY > 0 という別の条件が表示されます。

これで、スクロール方向が上方向のときのインタラクションを設定できます。ここまでと同じ Move レスポンスを繰り返して 2 つのレイヤーを元の位置に戻すこともできますし、後述する（とても便利な）Reset レスポンスを使うこともできます。

💡 ヒントとコツ

上方向へのスクロール時にもう一度 Move レスポンスを使う代わりに、Reset レスポンスを使うことで効率を最大化できます。

1. Detect の下の + をクリックし、Reset を選択します。対象を tabBar レイヤーに設定します。このケースでより自然な切り替えにするため、Easing を Ease out に設定します。同じ手順を繰り返して別の Reset レスポンスを追加し、今度は Header レイヤーに設定します。

2. Reset レスポンスは、選択したレイヤーを リセット し、元の位置と状態に戻します。

これで完了です！ スティッキーヘッダーをプロトタイプ化できました

ProtoPie でスティッキーヘッダーの作成をマスターした今、より動的でインタラクティブなプロトタイプを作る準備は万端です。ここで止まらず、ProtoPie の可能性を最大限に探り、あなたの創造的なアイデアを形にしましょう。