【header追尾】sticky？fixed？どちらを使用したほうがいいか？！

どうも、Tommy(@SitommyBlog)です。

今回は、実際に私自身が悩んで決断した方法をお伝えしたいと思います。

Webサイト制作において、headerを追尾させる実装はここ最近当たり前のように使われているかと思います。

その際、みなさんはどういったもので実装されていますか？
jsで実装される方や、cssのみで実装される方で、分かれるかと思います。

私は、cssのみで実装できるものならそれが一番良いと考えており今回もそのつもりで制作しておりました。
ここで、思わぬ誤算が生じてしまい、その体験談を記事にしていこうと思いました。

同じように悩んだ方がいるかと思いますので、是非参考にしてください。

実装したいこととは？

そもそも、実装したいこととは、

• headerの追尾
• フルリキッドではなく、ブレイクポイントで切り替える
• そのため、windowを縮めた際にスクロールで表示をさせたい

この条件からすると、『sticky』で十分だと判断しました。

ここで問題発生！！

IE11の問題です。
なんと、IE11だとスクロールした際に『ちらつき』が生じるということです。

sidenavの追尾では問題ないのに、header追尾のみ『ちらつき』が出てしまう現象が起きてしまって、いろいろ試みましたが、header追尾は『fixed』での対応にしようと決めました。

ただ、ここでも問題が発生！！

ある程度、cssを理解している人はすでに気づいているかとは思いますが、『fixed』を使用するということは、固定されるということになります。

つまり、windowを縮めた際に横スクロールでの対応ができないということになります。

対処法を見つけることはできたのですが、cssだけでの対応はできずjsでの対応をせざる負えなかったということでした。

こちらの対処法は、後ほど改めて紹介いたします。

せっかくですので、『sticky』と『fixed』の実装方法をお伝えしたいと思います。

stickyで実装した際は、、、

初めに『sticky』を使っての実装を試みました。
cssのプロパティで、ここ最近見かけることが多くなってきているものです。

この『sticky』はとても便利で、jsを使わずにコンテンツ内の追尾実装をやってくれる頼もしいプロパティです。

下記に、サンプルを表示させてますのでもし、stickyを知らない方は参考にどうぞ！

See the Pen
header追尾 by Tommy-Box (@Tommy-box)
on CodePen.

stickyの実装をする際のポイントとしては、topに値を入れないといけないということです。

上記のソースでは、
『 top: 0;』という値を入れております。

そうすることで、header要素の一番上にスクロールが来た時点で追尾が開始されるということになり、結果header要素は、常に追尾されることになります。

今まで、jsで書いていたことをstickyを使うだけで、実装できるようになったことはとてもありがたいですね。

シンプルに、楽になった！

fixedで実装した際は、、、

『fixed』を使った方法は、大抵の方は実装されたことあるかと思いますが、軽く紹介させていただきます。

See the Pen fixed jsなし by Tommy-Box (@Tommy-box) on CodePen.

まず上記のソースは、jsなしの状態です。
横スクロールしてもheaderエリアは固定のままなのでスクロールしない状態になっております。

ここから、今回の記事も本題に入りますが、下記のjsコードを入れてみて下さい。
*こちらはjQueryでの対応です。

$(window).on("scroll", function(){
     $("#fixed").css("left", -$(window).scrollLeft());
});

leftの値を取得してリアルタイムで代入してくれるので、スクロールが効くようになりました。

jsを入れたサンプルも一応、載せておきます。

See the Pen fixed jsあり by Tommy-Box (@Tommy-box) on CodePen.

これで、今回実装したかったものができるようになりました。

まとめ

IE11以下を、業界全体で破棄していただけたらと常々思う今日この頃。
といっても、まだまだ対応しないと行けないので仲良く付き合っていくしかないなっと思ってます。

ただ、なぜ『ちらつき』が出ているのかが不明なところが気がかりですが。
今は、いいとしております。

おまけでは無いですが、jQeryを使いたくない人向けに、jsのみで書いたソースも載せておきます。
参考にどうぞ！

const header = document.querySelector("#fixed");
    window.addEventListener('scroll', HeaderScroll, false);

    function HeaderScroll() {
        header.style.left = -window.scrollX + "px";
}

脱jQeryの方向けですね！