固定サイトタイトル

ほとんどのサイトでは、タイトルのメニューをいつでも変更できるようにタイトルが固定されています.
このセクションでは、最後のスクロールボタンで使用したスクロール関数に追加します.
ヘッダーコンポーネントでidを「ヘッダー」に設定した後、ウィンドウがoncrollまたはonloadされている場合、scrollFunctionという関数を呼び出すことができます.この関数の下の部分には次のコードが追加されています.

 if(document.getElementById("header") != null){
      if (
        document.body.scrollTop > 20 ||
        document.documentElement.scrollTop > 20
      ) 
      {
        document.getElementById("header")!.style.position = "fixed";
      } else {
        document.getElementById("header")!.style.position = "relative";
      }
    }

スクロール位置が20より大きい場合、positionをfixedに設定するのは、下にスクロールしてもガムのようにくっつくためである.しかし、そうすると、私が作成したサイトがPSのレイヤーのように貼られるので、私のサイトはタイトルのように貼られます.だから、スクロール数が0のとき、位置を相対して、「私もここに属しているので、位置を残してください!」サイトは以前のように見えます.
positionをfixedといいますが、なぜかtopが少し下がって、headerのcssも加わっています.

	position:fixed;
    width:100%;
    top: 0px;
    z-index:10;

Z-indexを向上させる理由は、スクロール時にz-indexが0の場合、他のコンテンツと重なる現象が発生するため、より高いz-indexが与えられるためである.しかし、私がここで考えなければならないのは、ヘザーより高いものがあるということです.私の場合はModal Chang

タイトルがモードウィンドウの上に移動する場合があります.そのため、react-modalのモードウィンドウを使用している私はReactModal Overlayのz-indexの値を上げました.

.ReactModal__Overlay{
    z-index: 100;
}

それで、私の欲しい感じが完成しました.