料金プランを有効化して学習を始めましょう。

スクロール時のナブバー表示・非表示

スクロールに応じてナビゲーションバーの動作を設定する

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

引用元

ナビゲーションバーを非表示にする

  1. ナビゲーションバーを選択し、その位置がビューポートに対して固定されていることを確認します
  2. インタラクションパネルで、When Scrolled Down を Start an Animationメニューから選択します
  3. 名前を付けます(例: "nav leave")
  4. タイムアクションの横にあるプラス記号をクリックします
  5. Move(移動)の下で、Y軸を調整して、ナビゲーションバーがビューポートの外側に配置されるようにします
  6. イージングカーブと所要時間を調整します

ナビゲーションバーを再表示する

  1. ナビゲーションバーを選択します
  2. インタラクションパネルで、Start an AnimationをWhen Scrolled Upメニューから選択します
  3. 名前を付けます(例: "nav enter")
  4. タイムアクションの横にあるプラス記号をクリックします
  5. Move(移動)の下で、Y軸を0に戻します
  6. イージングカーブと所要時間を調整します

プレビューで作業内容を確認してください。