🧠

ヘッダーのStickyを効かせるためのハックメモ

2020/09/22に公開

Stickyを効かせるために

画面の一番上にStickさせたい場合にうまく行かない場合があります。Stickさせた要素の親で一個でもScroll要素があった場合、画面ではなくその要素の一番上にStickしてしまいます。これは意図した挙動ではありません。

この場合、Fixedを使えば良いのですが、Fixedを利用した要素はサイズから計算されないためレイアウトが崩れてしまいます。
この場合、Fixedした要素と同じサイズの要素を準備し、visiblity: hiddenを付与することでサイズ計算を行いながらTopにスティックさせることができます。

 <mat-toolbar class="header" style="position: fixed; z-index: 10; top: 0">
      <div class="w-100 align-items-center d-flex" style="max-width: 66rem">
        <ng-content></ng-content>
      </div>
    </mat-toolbar>
    <!--To create space hack-->
    <mat-toolbar style="visibility:hidden;"></mat-toolbar>

Stickyを効かせるために

Discussion