はじめに
このプロジェクトでは、ユーザーが画面を下にスクロールしたときにページの上部に固定されるダイナミックなタブバーを実装する方法を学びます。この機能は、モバイルアプリやウェブサイトで一般的に見られ、円滑で直感的なユーザーエクスペリエンスを提供します。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学びます。
- CSS の位置指定を使用してダイナミックなタブバーを設定する方法
- ユーザーがタイトルバーを超えてスクロールするまで、タブバーを元の位置に保つためのスクロール動作を実装する方法
- ダイナミックなタブバー機能をテストし、期待通りに機能することを確認する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- CSS の
position: stickyプロパティを使用して固定タブバーを作成する - ダイナミックなタブバー機能をテストしてデバッグし、シームレスなユーザーエクスペリエンスを提供する
プロジェクト構造を設定する
始めるには、実験環境を開き、ディレクトリ構造は以下の通りです。
├── css
│ └── style.css
├── images
│ ├── 1.png
│ └── 2.png
├── index.html
└── js
└── index.js
その中で：
css/style.cssはスタイルファイルです。index.htmlはメインページです。js/index.jsはページのjsファイルです。imagesフォルダには、プロジェクトで使用される画像ファイルが含まれています。
- WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
- VM の上部にある「Web 8080」を開き、手動で更新します。結果は以下のようになるはずです。
- 上の画像にある http から始まるアドレスをブラウザにコピーし、新しいウィンドウを開きます。
ダイナミックなタブバーをセットアップする
このステップでは、ユーザーが画面を下にスクロールしたときにページの上部に固定されるダイナミックなタブバーを設定する方法を学びます。
cssディレクトリ内のstyle.cssファイルを開きます。- CSS ファイル内の
.buttonsクラスを見つけます。このクラスはタブバーを表します。 .buttonsクラスの中に以下の CSS コードを追加します。
position: sticky;
top: 0;
position: sticky プロパティは、ユーザーが画面を下にスクロールしたときにタブバーをページの上部に固定します。top: 0 プロパティは、タブバーがページの上部に固定されることを保証します。
ダイナミックなタブバーをテストする
style.cssファイルの変更を保存します。- ウェブページを表示しているブラウザウィンドウを更新します。
- ページを上下にスクロールし、タブバーの動作を観察します。ユーザーがタイトルバーを超えて下にスクロールするまでは元の位置にとどまり、その時点でページの上部に固定されるはずです。
おめでとうございます！あなたはコースウェブサイトに対してダイナミックなタブバー機能を成功裏に実装しました。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために LabEx でさらに多くの実験を行うことができます。
