☰

Angular 6 - CSS - STICKY ヘッダー 質問する

tag-icon • tag-icon angular css scroll sass
Angular 6 - CSS - STICKY ヘッダー 質問する

3 つの要素があります: ツールバー 1 つ、マップ 1 つ、その他のツールバー。要素は上下に並んでいます。

2 番目のツールバーをマップ要素の下 (上部の 400 ピクセル) に配置したいのですが、下にスクロールすると、2 番目のツールバーは上部の 50 ピクセルで停止し、最初のツールバーの下に固定されます。

ご協力いただきありがとうございます

//コンポーネント.html

<mat-toolbar color="primary" [ngStyle]="{'height':'50px'}"  class="fixed-header" >
</mat-toolbar>

<div class="custom-popup" id="frugalmap" ></div>

<mat-toolbar color="warn" class="mat-elevation-z5">
</mat-toolbar>

//コンポーネント.css

.fixed-header {
position: fixed;
z-index:999;
}

#frugalmap {
height: 300px;
width: 100%;
margin-top:50px;
}

.mat-elevation-z5 {
position: relative;
z-index: 2;
}

ベストアンサー1

あなたの質問に答える前に、5月考慮する：

  • HTML から静的スタイルを削除します。
  • 適切な z-index を使用してください。そうすれば、 のような z-index にはなりませんz-index: 100000000。
  • !important他に選択肢がない場合にのみ使用してください。

StackOverflowのスニペットではAngularコードを書くことができないので、Stackblitzを使ってコードを書きました。https://stackblitz.com/edit/angular-ii5tnn

位置を固定するには、 とposition: sticky追加のtopまたはbottomルール (この場合は top) を使用するだけです。例:

mat-toolbar {
  position: sticky;
  top: 50px
}

こうすれば、mat-toolbar私たちが通過するまで、彼の位置に留まるでしょう。

私の例では、次のことを行いました。

  • 新しい Angular 6 を初期化し、Material Angular を追加しました。
  • mat-toolbarを追加し[color="primary"]、CSS で固定に設定します。
  • #frugelmap表示のためだけにカスタムの高さを追加しました。
  • mat-toolbarを追加し[color="warn"]て固定ルールを設定します（下記をご覧ください）
  • たくさんの lorem ipsum を追加すると#add-spacing、粘着効果が現れます。

次の CSS ルール:

mat-toolbar {
  --default-height: 50px;
}

mat-toolbar[color="primary"] {
  top: 0;
  position: fixed;
  height: var(--default-height);
}

mat-toolbar[color="warn"] {
  position: sticky;
  top: var(--default-height);
}

#frugalmap {
  height: 300px;
  background-color: #EEE;
}

おすすめ記事