「30DAYSトライアル2nd」はこちらホームCSS途中からヘッダー固定にする方法!画面上部までスクロールされたら固定するCSS2019年5月12日ツイートシェアB!はてブポケット途中からヘッダー固定にする方法の紹介です。スクロールしてグローバルメニューが画面の上部に達した時に固定するという動きを実装していきます。実際の動きとしてはこんな感じです。おわり途中からヘッダー固定にする方法HTMLヘッダーメニューの作り方です。5つのメニューが並ぶシンプルな構成です。JavaScriptと連動させる大事な部分としては、#global-navになります。-->CSSCSSについては好きなように作ってもらえたらいいのですが、サンプルとして冒頭の動画のようなCSSを掲載しておきます。大事な部分としては、.m_fixedの部分で、グローバルメニューが画面上に達したら.m_fixedを付与するという処理をJavaScriptで実装するので、.m_fixedが付与された時に固定させるという処理をCSSで用意してあげてください。none;}JavaScript最初にグローバルメニュー(#global-nav)の位置と高さを取得します。スクロールのイベントでスクロール位置とグローバルメニューの位置を比較しつつ、超えたら.m_fixedを付与するという処理を行っています。);}});好きなタイミングで固定させる方法ピッタリ上部に固定する方法を紹介しましたが、好きなタイミングで固定させる方法もあります。方法は簡単でグローバルメニューの位置ではなく、好きなスクロール位置の固定値を指定してあげればOKです。具体的には以下のように、スクロール位置は判定する値を1000のように固定値にしてあげるだけです。);}});ちなみに、一度消えたので上から降りてきてる風な見栄えにしたい場合は、transitionを指定してtopの値を調整すればいい感じになるかと思います。追加箇所だけ抜粋すると以下のような感じです。リンクおわり途中からヘッダー固定にする方法でした。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。公式のSNSボタンをWordPressで設置する方法【Twitter,Facebook,Line...はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。