スクロールでウィンドウトップに来た要素をそのまま固定し追従するjQuery

Question

スクロールでウィンドウトップに来た要素に「fixed_top」を付けて、追従するコードです。

スクロールの度に「.fixed_top」が付いたヘッダーがチカチカと点滅するようになってしまい困っています。

思うに、スクロールする度に

if (navTopPos < winTop)

が判定されてしまって、チカチカしてしまうと思って色々試したんですが。。

よろしくお願いします。

$(window).scroll(function() {

  if (window.matchMedia('(min-width:769px)').matches) {
    var navTopPos = $('.header .navigation').offset().top;
    var winTop = $(window).scrollTop();

    var headerOfTop = $('body.top').find('.header').find('.navigation');
    var journalOfTop = $('body.top').find('.journal');

    if (navTopPos < winTop) {
      headerOfTop.addClass('fixed_top');
      journalOfTop.addClass('fixed_top');
    } else {
      headerOfTop.removeClass('fixed_top');
      journalOfTop.removeClass('fixed_top');
    }
  }
});

Answer 1

スクロールイベントの中でnavTopPosを更新（取得）しているため、
スクロールの度にnavTopPosのoffset位置が更新されます。

初回スクロール後、fixed_topクラスが追加され、
headerOfTop、journalOfTopは期待通り、ページ上部へ固定されるかと存じますが、
スクロールの度にnavTopPosのoffset位置が更新されるため、
ページ上部固定後のnavTopPosは再度0となります。

そのため、ページ上部固定後のスクロールイベントでは、
以下のifがelseと判定され、fixed_topクラスが除去されます。

if (navTopPos < winTop) {

上記が繰り返し発生し、ちらついているように見えています。

navTopPosについては、hasClassを使用し、
fixed_topクラスが付与されていない場合のみ、更新すればよいかと思います。

			if (!headerOfTop.hasClass("fixed_top")) {
				navTopPos = $('.header .navigation').offset().top;
			}

Comments

[cotton88]

解説までして頂き大変良くわかりました。
記述頂いたコードで解決が出来ました！
本当にありがとうございます。また機会があったらお願いします。