【jQuery】スクロールの位置によりサイドバーを固定・解除する例

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

【jQuery】スクロールの位置によりサイドバーを固定・解除する例

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

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

jQueryのコードについて

例では、スクロールの位置によって、サイドバーにある「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;

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

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

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

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