追従時に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つのページを開いて確認してみてください。

サンプル

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

jQuery
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました