コピペ用メモと解説と。
要点
例えば「<header>をブラウザ上部に固定してあって、ページトップだと背景無しにしてキービジュアルの邪魔をしないようにして、スクロールしたら他の要素に被って訳が解らなくなるのを避けるために背景色をつける」。そんな感じで、スクロール（ページの表示位置）でheader（特定要素）に何かしらのギミックを与える方法。
サンプル
ブラウザ1枚分以上の位置を表示したら<header>に色を付ける。
<header></header>
<div style="height: 4000px;"></div>header{
width: 100%;
height: 60px;
position: fixed;
top: 0;
right: 0;
}
header.bg{
background: #fff;
}$(function(){
$(window).on('load scroll resize',function(){
var nowPosition = $(window).scrollTop();
var windowHeight = $(window).height();
if(nowPosition >= windowHeight){
$('header').addClass('bg');
}else{
$('header').removeClass('bg');
}
})
})発火する位置はscrollだけでなくブラウザの幅が変わったとき（resize）も変化するし、発火条件として発火後に再読み込みした場合も無視できないからloadも必要になる。要するにブラウザをなんかするたびに判定する内容。
ブラウザの高さを.height()で取得したけど.innerHeight()とかもある。状況に応じて使い分ける。
ネックになるのはif(nowPosition >= windowHeight){}の部分で、現在位置と何を比べて条件とするか。今回みたいにブラウザの高さだったり、要素の高さだったり、何かしら特定の数値だったり、組み方によって色々出てくる。他にも◯◯以上かつ✕✕以下の範囲、みたいなのもある。上記でいうvarの部分を入れ替えるとか足したり引いたりするとか、ちゃんと計算というか計画を立てて組まないと混乱するので気をつけること。
応用
- 現在位置を予め取得しておく
- スクロールしたら位置の数値を拾う
- 1から2を引く
- 差が負なら（上にスクロール）header表示
- 差が正なら（下にスクロール）header非表示
たまに見るやつ。<header>が出たり入ったりするのは個人的にあんまり好きじゃない。追従するくせに消えるとか、一番下にスクロールしたら絶対に見えないじゃんとか、もやもやする。
js上ではclassの付け替えにとどめて、cssで装飾するのが無難。
- 上から一定数または下から一定数、もしくは全体から何％スクロールした位置か、発火点を決める
- スクロールしたら現在位置を拾う
- 発火点を過ぎたら広告表示
LPとかでやれそう。
あとは商品ページで購入リンク部分を一定位置を過ぎたら固定表示にするとか。土屋鞄が今のところそういうのをやってる。
ECは購入リンクをページ内に1つしか付けられないのでこういうギミックでもって表示位置を変える、見せ方を変えるとか。ボリュームのあるページだと購入部分に戻るのがダルいし。
コメント