【jQuery】スクロールの位置によりコンテンツを固定|サイドバーの例

今回は、jQueryを使用して、スクロールの位置により、指定したコンテンツの固定・解除を切り替えるソースコードの例となります。

スクロールの位置により、サイドバーのコンテンツの固定・解除

以下がjQueryを利用したソースコードの例となります。

例では、指定したスクロールの位置になると、サイドバー内の「Side-A」の要素を固定します。そしてフッターの手前でその固定した要素を解除します。

See the Pen side-fixed-content by yic666kr (@yic666kr) on CodePen.

ソースコードの説明

上記ソースコードでは、スクロールの位置によって、サイドバーにある「Side-A」の要素に指定されているclassの値を変更し、その要素を固定または解除します。また、要素を固定する際のCSSにはposition: fixed;を使用しています。

以下、jQueryのソースコードの説明となります。

offsetメソッドで位置を取得

以下の箇所では、offsetメソッドを使い、要素を固定させる位置と解除する位置を取得します。

// 要素を固定させる位置を取得
var fixed = $('.side-fixed-area').offset().top;
// フッター手前の要素を解除する位置を取得
var footer = $('.site-footer').offset().top-120;

現在の位置と、offsetメソッドで取得した位置を比較

以下の箇所では、$(window).scrollTop()で取得した位置(現在の位置)と、上記offsetメソッドで取得した位置を比較します。比較した値は以降の条件分岐で利用します。

// 以下の条件分岐で使用する位置の状態を取得 
var windowScrollTop = $(window).scrollTop();
var footerArea = windowScrollTop > footer;
var beforeFixedArea = windowScrollTop < fixed;
var fixedArea = windowScrollTop > fixed;

removeClass、addClassメソッドでclassの値を削除、追加

以下の箇所では、上記の比較演算子を使って判断したスクロール位置により、classの値を削除、追加します。それによりclassの値にside-fixed-contentが追加された要素が固定されます。

classの値を削除する場合はremoveClassメソッド、追加する場合はaddClassメソッドを使用します。

if( footerArea || beforeFixedArea ) {
    $('.sideA').removeClass('side-fixed-content');
} else if ( fixedArea ) {
    $('.sideA').addClass('side-fixed-content');
}

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。