【JQuery】画面スクロール後の固定fixedの画面チラツキをなくす

今回は画面スクロールしてCSSで固定fixed設定する際に画面がチカチカとチラついてしまう時の対処法を解説したいと思います。

下記がヘッダーメニューのチカチカ動画です。

通常はJQueryでelse条件をして反対の条件のremoveClassでクラスを削除してると思います。

それだと切り替えの条件の幅が狭いためにチラツキが発生するようです。

FireFoxではこの現象は起きないようですが、クロームやedgeだとチラツキが発生するようです。

ブラウザによって多少そのチラツキ度が若干違います。

原因

指定したブロックの境目で下記のようにクラス.inが高速で混在する現象が発生します。

通常はJQueryのifとelseでクラスのブロックの切り替わり時に処理をさせてると思います。

ですがそれだとブロック幅が小さいためかaddClassとremoveClassが効いたり効かなかったりが原因で下記のように.inクラスが混在しまくっているのが下記で確認できると思います。

ですのでこの切り替わりの幅を少し広くしてあげることでこのチカチカを解消すことができます。

これが原因でCSSが効いたり効かなかったりしています。

else ifでremoveClassで削除する際の条件を指定してあげます。

ブロックの境目付近の切り替わりの幅が狭いのが原因で混在するので、下記のように切り替わりの幅を広げてあげます。

else ifの行の切り替わる幅を-150～-300程度開ければちらつきが解消されます。

※ブラウザによってこの幅が違うので調整が必要です。

私の場合は-150でクロームとedgeのチラツキが解消されました。

$(function () {

var ost = $('.nav-single').offset();

$(window).scroll(function () {

if ($(window).scrollTop() + $(window).height() > ost.top) {

$('.nav-menu').addClass('in');

} else if ($(window).scrollTop() + $(window).height() < ost.top - 150) {

$('.nav-menu').removeClass('in');

}

});

.nav-menu.in{

position: fixed;

top: 10px;

left:0px;

z-index: 10;

}

ブラウザによってはスクロールしてからcssのfixedの切り替わり時のカクッとした動きになる現象も解消されます(^^♪

このようにブラウザで確認しないとなぜこのようなエラーが起きてるかがわからない時があります。

このようなエラーが発生した場合はブラウザでデバッグすればすぐわかるので試してみてください(゜▽゜)

以上です。