【jQuery】固定ヘッダーがスクロールのたびにチカチカする解決策【day110】

今日は、【jQuery】固定ヘッダーがスクロールのたびにチカチカする解決策についてです。同じバグで悩む人の助けになったらうれしいです。

こんにちは。駆け出しコーダーのharuです。

＊わたしについて＊
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
まだHTML/CSS(SCSS)/jQuery のよわよわです。これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！

【jQuery】固定ヘッダーがスクロールのたびにチカチカする解決策
あとがき

【jQuery】固定ヘッダーがスクロールのたびにチカチカする解決策

今日は、jQueryで固定ヘッダーを実装したときに、スクロールするとヘッダーがチカチカしてしまう問題を解決したのでまとめます。（語彙力…伝わっていますか？w）

なかなか検索で引っ掛からなかったので(みんな、あまりしないミスなのであろう…(´･ω･`;))、同じバグにハマった人の助けになったらいいなと思い、記事に残すことにしました。

チカチカってこんな感じ…

伝わりますか…？スクロールすると、固定した部分が全体がチカチカ点滅してしまって困っていました。

元のjQuery

元のjQueryがこちらです。

$(function(){ 
  $(window).scroll(function () {
    var navPos = $(".nav").offset().top;
    var winTop = $(window).scrollTop();
    var headerTop = $(".nav");

    if (navPos < winTop) {
      headerTop.addClass("fixed");
    } else {
      headerTop.removeClass("fixed");
    }
  });
});

固定したいのが.nav（＝ヘッダーナビゲーション）の部分です。

if文で、

nav（topからの距離）＜ windowのtop

となったときにfixedクラスをつけ外しして、ヘッダーナビゲーションを固定、または固定解除するようにしました。

しかし、これではチカチカ点滅してしまいます。

原因

スクロールするたびに

navPos = $(“.nav”).offset().top;

が取得されてしまっていたのが原因でした。スクロール行ったり来たりするときに、その都度、offset()で値を引っ張ってきて更新してしまっていたようです。

解決後のjQuery

解決後のjQueryはこちらです。

$(function (){ 
  $(window).scroll(function () {
    var winTop = $(window).scrollTop();
    var headerTop = $(".nav");
    
    //fixedクラスがついていないときだけ、offset()で値を取得する
    if (!headerTop.hasClass("fixed")) {
      navPos = $(".nav").offset().top;
    }

    if (navPos < winTop) {
      headerTop.addClass("fixed");
    } else {
      headerTop.removeClass("fixed");
    }
  });
});

if文を増やして、fixedクラスがついていないときだけ、offset()でnavの高さを測るようにしました。

//fixedクラスがついていないときだけ、offset()で値を取得する
if (!headerTop.hasClass(“fixed”)) {
navPos = $(“.nav”).offset().top;
}

【完成物】