2021.01.22

ヘッダーまでスクロールしたらヘッダーが画面上部についてくるjavascript

こんにちは。

ホームページでヘッダーがメイン画像の下にあってヘッダーまでスクロールするとそのまま画面上部についてくるような動きがあると思います。

イメージ下記リンクの様な感じです。

https://hanshin-funatabi.jp/

※当ブログ作成のサイトではありません。

今日はその動きを簡単に作る方法を解説していきます。

もちろんヘッダーだけでなく色々と使用することができます。

まずはhtml。

こんな感じで作りましょう。

<header id="main-header">
  <div class="header-inner">
    <h1>サイトロゴ</h1>
    <nav class="main-nav">
      <ul>
        <li><a href="/#">リンク</a></li>
        <li><a href="/#">リンク</a></li>
        <li><a href="/#">リンク</a></li>
        <li><a href="/#">リンク</a></li>
        <li><a href="/#">リンク</a></li>
      </ul>
    </nav>
  </div>
</header>

<h1>サイトロゴ</h1>

<ul>

</ul>

</nav>

</div>

</header>

大事なのは「main-header」と「header-inner」の二つ、

今回は画面上部が「main-header」に触れたら「header-inner」がfixする形で作っていきます。

次にjavascript

純粋なjavacriptなのでjQueryは必要ありません。

var $mainHeader = document.getElementById('main-header');

window.addEventListener('load', fixed_check);
window.addEventListener('resize', fixed_check);
window.addEventListener('scroll', fixed_check, { passive: true });
function fixed_check(){
  var nowpos = $mainHeader.getBoundingClientRect().top;
  if(nowpos <= 0){
    $mainHeader.classList.add('fixed');
  }else{
    $mainHeader.classList.remove('fixed');
  }
}

var $mainHeader = document.getElementById('main-header');

window.addEventListener('load', fixed_check);

window.addEventListener('resize', fixed_check);

window.addEventListener('scroll', fixed_check, { passive: true });

function fixed_check(){

var nowpos = $mainHeader.getBoundingClientRect().top;

if(nowpos <= 0){

$mainHeader.classList.add('fixed');

}else{

$mainHeader.classList.remove('fixed');

}

ここまで適応させると「main-header」以下にスクロールさせると「main-header」にクラス「fixed」が付与されるようになります。

あとはcssでfixedが付与されている時とされていない時で動きを変えれば完成です。

こんな感じ（scss記法で記述しています。）

#main-header{
  height: 60px;
  position: relative;
  .header-inner{
    position: absolute;
    width: 100%;
    height: 60px;
    top: 0;
    left: 0;
  }
  &.fixed{
    .header-inner{
      position: fixed;
    }
  }
}

#main-header{

height: 60px;

position: relative;

.header-inner{

position: absolute;

width: 100%;

height: 60px;

top: 0;

left: 0;

}

&.fixed{

.header-inner{

position: fixed;

}

これでヘッダーまでスクロールしたらついてくるヘッダーが完成です。

簡単ですよね。

もちろんヘッダーだけではなく、例えばアーカイブページのサイドバーなど応用は色々効きます。

最後に、cssのfixedを使用しているのでIEで表示するとカクカクします。

気になる場合はこの過去記事に対処方が載ってますのでよかったらこちらもチェックしてみてください。

cssのpositionなどでfixedを設定した時にIEでカクつく時の対処。jQueryなしver

JavaScript