[jQuery]一定区間のみ要素を表示するギミック

以前書いた内容と似てる

ベースになる構築
完成イメージ
やっていく

ベースになる構築

これは「一定区画を過ぎたら○○」なので、更に「一定区画まで来たら○○」を加える感じ。

完成イメージ

こんな感じ

1画面分とちょっとを過ぎたら表示
最後らへんに来たら非表示

具体的に言えば、以下のような感じ。

申込みを促すリンクを画面上に固定配置
ページの最下部に申込みフォームを設置
ファーストビューでは固定配置を非表示
申込みフォームまで来たら固定配置は非表示
ついでに、スマホ表示のときだけ表示させる（768px）

キービジュアル部分に重ねるのは余計だし、該当箇所まできたら不要だし、ってことで。

やっていく

HTMLはこんな感じだとする

<div id="fix">固定表示</div>
<section></section>
<section></section>
<section></section>
︙
<section #form>フォーム内容</section>

CSSは好きにすればいいけど、とりあえずこんな感じ。フェードさせたいから表示周りはjsで制御することにする。

#fix{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: none;
}

で、本題。

$(function(){
    $(window).on('load scroll resize',function(){
        if(window.matchMedia('(max-width:767.98px)').matches){
            var nowPosition = $(window).scrollTop();
            var windowHeight = $(window).height();
            var formPosition = $('#form').offset().top;
            var showPosition = windowHeight * 1.2;
            var hidePosition = formPosition - windowHeight * 0.2;
            if(nowPosition >= showPosition && nowPosition <= hidePosition){
                $('#fix').fadeIn('fast');
            }else{
                $('#fix').fadeOut('fast');
            }
        }else{
            $('#fix').fadeOut('fast');
        }
    })
})

まず大枠としてmachMediaの条件分岐でスマホ表示時に限定し、幅が超過したら強制的に非表示にするとこから始める。

ファーストビューの高さと#formの位置を取得して、表示位置と非表示位置を指定。キッチリした位置で切り替わると気持ち悪さがあったんで、表示も非表示も0.2画面分の遊びを加えた。

最後に現在位置と絡ませて条件分岐。「開始点以上かつ終了点以下」にしてるんで、つまり「該当範囲内であれば表示する」という内容。