【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');
}