ヘッダーが消えそうになると上に固定されたり、カラムが特定位置で固定されたり
なんとなくどうやってやっているのか気になっていたので、調べてみたら理解できた！
その理解したことについてまとめます。
１まずは「特定位置」を取得しよう
ある要素、ここでは「#youso」とします。
まずある要素（#youso）のトップからの距離を取得します。
$(function() {
// #yousoのトップからの距離を「youso」へ格納
var youso = $("#youso").offset().top;
// 「youso」をアラーとしてみます。
alert(youso);
});
２次に「スクロール値」を取得します
スクロール値を取得する際に使われる「.scrollTop()」ですが、「T」を大文字にするのを忘れる時があります。
実際、スクロール値を取得する際に、値が取れなくてjavascriptが機能せず小一時間悩んだ結果、大文字にするのを忘れていた経験が有るので大文字にするのを忘れないようにして下さい！（自分に）
$(function() {
$(window).on("scroll", function() {
// スクロール値を取得する場合「.scrollTop()」
var scroll = $(window).scrollTop();
// すぐ下の「.scroll」にスクロール値を表示
$(".scroll").text(scroll);
});
});
↓「.scroll」でスクロール値を表示
１と２を使って「スクロール値」が「特定位置」まで来たらを取得します
あと少しで「特定要素までスクロールしたら」ができます！
今回は、とある要素を「#to」とします。
スクロールして「#to」まで来たら、アラートが出ます。
スクロール値を取得する際の「.scrollTop()」は、トップの値を常に取っているため、if文で比較するとトップを「#to」が超えたらアラートとなります。
なので、その値にウィンドウの高さを追加して「#to」が見えたらアクションをするよう変更します。
ここで使われるのが「$(window).height()」で、これはウィンドウの高さを取得します。
$(function() {
// #toのトップからの距離を「toaru」へ格納
var toaru = $("#to").offset().top;
$(window).on("scroll", function() {
// スクロール値を取得する場合「.scrollTop()」
var scroll = $(window).scrollTop() + $(window).height();
// とある要素「#to」までスクロールしたらアラートを出します。
if(scroll >= toaru) {
alert("とある要素が出現した！");
}
});
});
結果は下にスクロール↓↓↓
最後にパソコンの人だけが確認できるが、右のカラムの「人気記事」がさっきからずっと付いてきている
この「人気記事」には「#sidebar」というIDが付いている。
こいつにjavascriptを使って、このページのみずっとついてくるようにしている。
この場合、ウィンドウのトップに来たらアクションを起こすので「$(window).height()」は使わない。
さらに、ヘッダーとフッターがあるので、その辺も考慮して書きます。
書き方はこれだ。
$(function() {
// 固定する要素を変数に格納
var side = $("#sidebar");
// スライダーを固定する距離に使用するクラスを変数に格納
var cont = $(".content");
// #sidebarのトップからの距離を「sidebar」へ格納
var sidebar = side.offset().top;
// 「kizi」に記事コンテンツの高さに多少加減して記事コンテンツの終わりまでの長さを取得
var kizi = cont.outerHeight() - 300;
$(window).on("scroll", function() {
var scroll = $(window).scrollTop();
if(scroll >= sidebar) {
// 「#sidebar」が記事の終わりまで来たら記事の下に固定
if(scroll >= kizi) {
side.css({position: "absolute", top: "auto", right: "0", bottom: "0", height: "auto"});
// ウィンドウのトップが「#sidebar」に来たら固定します。
} else {
side.css({position: "fixed", top: 0, right: 0, bottom: "auto", height: "auto"});
}
// それ以外はもとに戻します。スクロールを上まで戻すと、ちゃんと元の位置に居てくれます。
} else {
side.css({position: "relative", top: "auto", right: "auto", bottom: "auto", height: "100%"});
}
});
});
解説
まず、スクロールしたらずっとついてくる要素を変数に入れます。
「var side = $(“#sidebar”);」
次に、要素がついてくる距離にあたる要素を変数に入れます。
「var cont = $(“.content”);」
スクロールしたらついてくる要素「side」のトップからの距離を変数に格納します。
「var sidebar = side.offset().top;」
要素がついてくる距離にあたる要素「cont」の長さを変数に格納します。
このページではCSSの読み込みがこのjavascriptの記述より遅いため、「-300」が必要になりました。
「var kizi = cont.outerHeight() – 300;」
最後に現在のスクロール値を変数に格納します。
「var scroll = $(window).scrollTop();」
この変数に入れた要素で、if文を作成していきます。
if文は３つになります。
内容は、
１「現在のスクロール値（scroll）が、ついてくる要素のトップからの距離（sidebar）を超えたら」
if(scroll >= sidebar)
２「現在のスクロール値（scroll）が、固定する長さ（kizi）を超えたら」
if(scroll >= kizi)
３「それ以外の時」
else
になります。
それ以外の時とは、一番上からついてくる要素のトップからの距離（sidebar）までです。
if文の中にCSSを変更する記述がありますが、このサイト用のCSSの変更ですので、コピペでは使えない可能性があります。
もし、コピペする場合はCSSを自分のサイトにあったものに変更をしてください。
ヘッダーとフッターがなく常に固定させておきたい場合は、javascriptを書かずにCSSだけで「position:fixed」をすれば固定されます。
コメント