jQueryを使って指定の範囲内でのみ要素の位置を固定する方法

Keisuke Ota

こんにちは、けいすけです。

今回は、”position: fixed”を使って要素を固定させるのですが、その際、jQueryを使って固定させる範囲を指定してみたので共有したいと思います。

目次 [表示する]

  1. 指定の範囲内でのみ要素の位置を固定する方法
    1. 完成形
    2. 指定の範囲内でのみ要素の位置を固定する考え方

指定の範囲内でのみ要素の位置を固定する方法

完成形

完成形がこちらです。

jQuery

                            
$(function() {
    let box = $('#fixed-box'),
        boxHeight = box.innerHeight(),
        boxWrapper = $('#fixed-box-wrapper'),
        boxWrapperHeight = boxWrapper.innerHeight(),
        boxWrapperTop = boxWrapper.offset().top,
        boxWrapperBottom = boxWrapperTop + boxWrapperHeight,
        marginTop = 20;
    
    $(window).on('scroll', function() {
        let value = $(this).scrollTop();
        if ( value > boxWrapperBottom - boxHeight - marginTop) {
            box.css({
                'top': boxWrapperBottom - boxHeight - value,
                'position': 'fixed'
            });
        } else if ( value > boxWrapperTop - marginTop) {
            box.css({
                'top': marginTop,
                'position': 'fixed'
            });
        } else {
            box.css({
                'position': 'static'
            });
        }
    });
});

HTML

                            
<div id="fixed-box-wrappe">
    <div id="fixed-box">box</div>
</div>

上記を実装したものがこちらです。

box

指定の範囲内でのみ要素の位置を固定する考え方

“position: fixed”を使うと、スクロールの位置にかかわらず、表示位置を固定することができますよね。

ヘッダーやフッターに使用する場合は、常に表示位置を上か下かに固定していれば、問題になることはないと思います。

しかし、それら以外のmain要素などで使用するとなると、表示位置の固定をする範囲を絞らないと、レイアウト崩れの原因になることがありますよね。

それは、以下に示す方法によって回避することができます。

  • 固定する範囲の始まりと終わりとなるスクロール位置を取得
  • 条件分岐をして要素を固定する範囲とそうでない範囲を指定

ここでポイントですが、指定の範囲を超えてスクロールした際、固定している要素の位置は、その要素自身の高さを使って、スクロールの位置に対する相対的な値を算出して設定する必要があります。

こうすることで、指定の範囲を超えてスクロールしても、要素が指定の範囲内で固定されているように見えます。

Related