こんにちは。

スマホサイトを作っていると、スクロールした際に上部にメニュー等を固定にすることはよくありますよね。

var box    = $('#fixedBox');
var offsetTop = box.offset().top;
$(window).scroll(function () {
    if ($(window).scrollTop() > offsetTop) {
        box.addClass('fixed');
    } else {
        box.removeClass("fixed");
    }
});

みたいなことですね。

先日もそうやって固定にしたんですよ。
そしたらクライアントさんから
「ゾゾタウンみたいにスムーズじゃない」
「スクロールしてしばらくしないと表示されない(固定にならない)」
「ゾゾタウンはもっと滑らかだ」「ゾゾタウンが・・・」
と、やたらとゾゾタウンを引き合いに出して怒られたんですよ。

どないなもんかと僕もゾゾタウンを見てみたら確かに滑らかに固定されてるんですよね。
それに比べてこちらが作ったものはスクロールしてメニューが画面から消えてから表示されるまでに時間がかかるのです。
よくよく調べてみると、iOSでは慣性スクロール(画面を素早くスクロールさせた際、指を画面から離しても急には止まらず、慣性が作用しているようにスクロールがある程度維持される機能のこと)が効いているあいだはイベントが発生しないらいんですよね。
ゾゾタウンのjavascriptも見てみても書いていることはほぼ同じだったのでおかしいなあと思ってさらに調べているとやはり同じことで困っている人が多いようで、しかもその解決方法がCSSのほうに対するちょっとしたおまじないのような記述で解決するということで早速試してみたら本当に解消されました。

固定にする要素に対して、

#fixedBox {
    transform: translate3d(0, 0, 0);
}

と記述するだけです。

またひとつかしこくなったなぁ。