追従時にposition: fixedさせると要素の高さ分だけスクロールが動いてしまうガタつきを解消させる方法

追従の解決策について紹介していきたいと思います。

追従って聞くとヘッダーやフッター、そして広告などさまざまな要素の追従がありますよね。

よく使われる追従ですがガタついたり思ったような動きにならなかったり色々な問題もあると思います。

追従ヘッダー

html

<header>
        <div class="header-inner">
                ヘッダー部分
        </div>
</header>

css

header{width: 100%;}
.header-inner{
        width: 100%;
        height: 100px;
        text-align: center;
        background: #eee;
}

.fixed .header-inner{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
}

jQuery

jQuery(function(){
        jQuery(window).on("scroll", function() {
                if (jQuery(window).scrollTop() > jQuery('header').height()) {
                        jQuery('body').addClass('fixed');
                }else {
                        jQuery('body').removeClass('fixed');
                }
        });
});

サンプル

これで追従ヘッダーになりました。

ですが追従時にposition: fixed;させることでもともとあったヘッダーの高さがなくなり位置がズレたようになりますね。

解決策

css

header{
	width: 100%;
	height: 100px;
}

先ほどのcssに記載されていたheader要素のスタイルにヘッダー分の高さを入れてあげましょう。

そうすることで追従時にposition: fixed;されてももともとあったヘッダーの高さが維持されてズレることがなくなりました。

もし動作の違いが判らなければ2つのページを開いて確認してみてください。

サンプル