ページスクロールについてくるコンテンツを作るには
ページスクロールについてくるコンテンツについて、前回紹介しました。
では実際にどうやって作り込んでいくのか・・・
今回は実装方法についてお話していきましょう。
一番簡単な方法は、jQueryプラグイン「Sticky-Kit」を使う事です。
でもこの方法だと横スクロールが発生するコンテンツだとうまく動いてくれません・・・
調整をしてもいいのですが、パッケージ化されているので解析などに時間がかかりそうですね。
なので私はここ数年自分でJavaScriptとCSSを書いて実装させています。
ページの構造について
固定にするコンテンツはposition:fixed;で位置を決めます。
左右コンテンツの場合、いつまでもfixedを指定していてはフッターに重なってしまうので、フッターの直前でposition:absolute;に変更する必要があります。
親要素にposition:relative;を設定して、位置を決める基準にできるようにしておきましょう。
ちなみにCSSの変更はJavaScriptでおこないます。
またページ表示時にはコンテンツを固定しない場合、丁度上図のレイアウト配置で、サイドを付いてくるようにする場合ですね。このような場合にはサイドの上端がブラウザの上端に達した時に付いてくるように作り込んだ方が自然です。
なのでページ表示時はposition:static;またはrelativeを設定します。
実装するJavaScriptについて
スクロール量に応じてCSSを変えて実現させるために、JavaScriptを使ってスクロール量を取得します。
またヘッダーの高さやウィンドウの横幅などの値も取得し、それらの値を足し引きして現在のページ表示の状態を計算していきます。
ヘッダーの高さからスクロール量を引けば、ヘッダーが隠れる位置が数値で出すことができます。
なのでサイドコンテンツがどの数値になったらCSSを切り替えるのかが設定できるようになりますね。
サイドコンテンツの追従を止めるのも同様です。数値を計算して、どの数値になったらCSSを切り替えるのかを設定していきます。
var dElm = document.documentElement , dBody = document.body ;
var nY = dElm.scrollTop || dBody.scrollTop ;//縦方向へのスクロール量
var nX = dElm.scrollLeft || dBody.scrollLeft ;//横方向へのスクロール量
var bodyH = $(“body”).height();//body要素の高さ
var contentsW = $(“#contents”).width();//コンテンツ部分の横幅
var winW = $(window).width();//表示ウィンドウの横幅
var footer = $(“footer”).height();//フッターの高さ
var header = $(“header”).height();//ヘッダーの高さ
var sub = $(“#sub”).height();//サイドコンテンツの高さ
var follow = header – nY;//ヘッダーの高さから縦方向へのスクロール量を引いてヘッダーが隠れる値を計算
var sidestop = bodyH – nY – footer – sub;//フッターとサイドコンテンツの隙間を計算
if(sidestop <= 0){//サイドコンテンツをフッターの上で追従を止める
&(‘#sub’).css({
”position”: “absolute”,
”top”: “auto”,
”bottom”: “0”,
”right”: “0”
});
} else if(follow <= 0 && winW <= 999){//ヘッダーが隠れた状態で、ウィンドウの横幅が1000px未満になったとき
&(‘#sub’).css({
”position”: “fixed”,
”top”: “5px”,
”bottom”: “auto”,
”right”: winW – contentsW + nX + “px”
});
} else if(follow <= 0){//ヘッダーが隠れた状態
$(‘#sub’).css({
”position”: “fixed”,
”top”: “5px”,
”bottom”: “auto”,
”right”: (winW – contentsW) / 2 + “px”
});
} else { //上記以外
$(‘#sub’).css({
”position”: “absolute”,
”top”: “0”,
”right”: “0”
});
}
}
//レスポンシブWEBデザインに対応するため、スクロールやページ幅を変えたとき再計算させるように設定する
/*:初期*/
$(function(){
follow();
});
/*:ページ幅変更時*/
$(window).on(‘load resize’, function(){
follow();
});
/*:スクロール時*/
$(window).on(‘scroll ‘, function(){
follow();
});
JavaScriptを書くとこの様な感じになります。
複雑に見えますが、やっていることは単純で、「ヘッダーが隠れた時に指定するCSS」と、「横スクロールが出た時に設定するCSS」「フッターが見えた時に設定するCSS」最後に「どの条件にも当てはまらない時のCSS」をJavaScriptを使ってそれぞれ設定しているんです。
この方法は左側に追従させるコンテンツがある場合に限りますが、右のコンテンツの場合でも、ページ上部に設置したナビゲーションを追従させる場合でもあまり変わりません。
取得する値と、条件の分岐方法が変わるだけなので、基本的な考え方は十分応用がきくはずです。ぜひ試してみてください。
またどうしても動かない場合は、jQueryのバージョンを再度確認してください。
注意点などは以前に書いたこちらの記事も合わせて読んでみてください。
まとめ
・jQueryプラグイン「Sticky-Kit」を使うか、自分でJavaScriptを書く
・スクロール量などの値をJavaScriptで取得してCSSを切り替える
