ども。
WEBおじさんです。
今回は、スクロール系のことについてお話します。
最近のWEBサイトはかなりインタラクティブ性が高くなっているというか、動きに対する動きっていうんですかね。全体的に「よく動くサイト」になってますよね。
一昔前は全部FLASHでやってたようなことを全部JSとCSSで実現できてしまうという、なんかそんなイメージです。
でも、ページをスクロールさせた時の動きというのは今も昔も変わらずJSでイベントを管理して処理しているイメージですね。
今回お話しする内容もJSです。
最近はよく見る動きだと思うんですが、ページを特定の位置までスクロールさせた時に「何かが起こる」処理を説明します。
今回の「何か」は「特定の要素がページ内に固定される」処理を書こうと思います。
というわけで、恒例のデモはこちらから。
まず、考え方から。
理論としては、スクロールした距離をJSで取得し、その数値が特定の値を超えた場合にイベントを起こさせる、というイメージです。
今回のデモから開設すると、デモ画面での主役は「青」のブロックです。ページを特定の位置までスクロールさせるとこのブロックが固定されます。
では、特定の位置とはどこか？
これはもちろん任意の場所なので、ご自身で作る場合はお好きな位置を指定すればいいのですが、大概スクロールして要素を固定させる場合って、2パターンですよね。
まず、1パターン目は「特定の要素がページの最上部まで来た」時に最上部に固定させる動き。これはまさにデモと同じ状態です。
この場合、どういう情報が必要かというと、「読み込み時の特定の要素の位置」「スクロールした時の位置」の2つが必要で、これをスクロール中に常に比較する必要があります。
とりあえず、まずはHTMLとCSSのソースを以下に。
【HTML】
<div id=”boxbox”>
<p id=”disbox”>height:750px;</p>
<p id=”btnbox”>height:1000px;</p>
</div>
【CSS】
#boxbox {
width:100%;
max-width:1000px;
height:2500px;
text-align:center;
font-weight:bold;
margin-bottom:30px;
padding:20px;
border:2px solid #666;
box-sizing:border-box;
position:relative;
}
#btnbox {
width:100%;
height:1000px;
background-color:#00f;
color:#fff;
}
#disbox {
width:100%;
height:750px;
background-color:#00f;
color:#fff;
}
#btnbox,
#btnboxop {
width:60px;
background-color:#f00;
color:#fff;
cursor:pointer;
}
今回は「#disbox」の要素が主役の要素になります。
ということは、「ページ読み込み時のこの要素の位置」をJSで取得する必要がありますね。
では、JS（jQuery）を以下に。
【jQuery】
$(function(){
//要素の位置
var disps = $(‘#disbox’).offset().top;
$(window).scroll(function(){
//スクロールした位置の数値
var topps = $(this).scrollTop();
if(topps >= disps){
$(‘#disbox’).css({
‘position’:’fixed’,
‘top’:’0′,
‘height’:’250px’
});
$(‘#disbox’).text(‘ページ内トップでストップ！’);
}else{
$(‘#disbox’).css({
‘position’:’static’,
‘top’:’inherit’,
‘height’:’750px’
});
$(‘#disbox’).text(‘height:750px;’);
}
});
});
まず、「disps」という変数で「#disbox」の位置を取得するのですが、その際に使用するものが「offset」メソッドです。
offsetメソッドは「top」と「left」を取得、または指定することができます。
上のスクリプトのような書き方をすると指定の要素の座標位置を取得することができます。
ここで必要なのはtopの位置だけですのでtopを取得してます。
ちなみに、この値は意図的に変更しない限り読み込み時の値から基本的に変更されたり動的に数値が変わったりすることがありません。
で、次に「$(window).scroll(function(){」でスクロールした際の処理を書いていきます。
スクロールしている時に真っ先にやることは「スクロールの距離の数値を取得する」ことです。
それを「scrollTop()」で取得することができます。
上のように「var topps = $(this).scrollTop();」と書けば「topps」という変数の中に常にスクロールした位置の値が代入されます。
この「scrollTop」ですが意外と便利で、scrollTop(300)というような書き方をすればスクロール位置を指定して使うことができます。
これを応用してスクロールした位置からページの最上部へ戻すことも簡単にできますし、animateと合わせて使えばスムーススクロールとして使用することができます。
animateと合わせた書き方は「animate({scrollTop:値})」という感じですね。
で、話は戻りますが、上のJSの次の処理として、スクロールした位置と要素の位置を比較してますね。
「topps」の値が「disps」の値よりも大きければpositionをfixedにしてtopを0に指定し、heightを250pxに変更して要素内のテキストを「ページ内トップでストップ！」に変更する処理を書いています。
逆に、「topps」の値が「disps」の値よりも小さい場合は元の値に戻す処理を書いています。
これでスクロールした際に特定の位置を境に要素のスタイルや内容を変更することができました。
基本形の書き方ですね。
で、スクロールして要素を固定させる場合は2パターンって書いておいて一つしか紹介していませんでしたが、もう1パターンは「サイトヘッダ固定」のパターンですね。
要は、こちらの場合はスクロールした時の比較とか必要なく、ページを読み込んだ時から固定ってことです。
これは、CSSでfixedにしておけば固定になるのでJSは必要ないですね。
必要があるとすれば、スクロールして下の方に行った場合はヘッダのサイズを変更する、みたいな時ですかね。
その場合の処理も今回の書き方とほぼ同じです。
スクロールして特定の距離進んだらJSでCSSの変更をすることで対応できますよね。
ということで、スクロールイベント時の考え方と基本的な書き方について今回は解説しました。
CSSを変えればいろいろ見せ方が変わると思うので、オシャレな感じにCSSを指定してあげればサイト自体もオシャレになると思います。
では、今回はこのへんで！
WEBおじさんでした！
