[jQuery]特定位置にスクロールしたら表示/非表示するギミック

簡単ですよ。

組み方
例えば
まとめ

組み方

現在位置が1画面分以上スクロールされていたら表示するという内容。

こんなのがあったとする。

<body>
    <div id="scrolltarget">aaaa</div>
</body>

こうする。

body{
    height: 500vh;
}
#scrolltarget{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
}

こんな感じ。

$(function(){
    $(window).on('load scroll resize',function(){
        let nowPosition = $(window).scrollTop();
        let trigger = $(window).height();
        if(nowPosition >= trigger){
            if(!$('#scrolltarget').hasClass('active')){
                $('#scrolltarget').addClass('active').fadeIn();
            }
        }else{
            if($('#scrolltarget').hasClass('active')){
                $('#scrolltarget').removeClass('active').fadeOut();
            }
        }
    })
})

まず表示位置は読み込み時、リサイズ時、スクロール時で変わるので.on()で指定。

発火位置を過ぎたらclassを付与、そうでなければ外す。classの有無で判別して表示・非表示を切り替える。

cssでフェードを作るのは面倒くさいので、今回はjQueryで制御。単純な表示非表示の切り替えとか、画面外から生えてくるようなやつはcssで作ったほうがjQueryではclassを付けるかどうかだけの内容になるので楽かも。

ブラウザの高さ、現在表示している位置、特定要素の位置、特定要素の高さ、それぞれjsで引っ張ってこれるので、「一定の位置を過ぎたら」「特定要素を過ぎたら」「特定要素の手前まで」みたいな感じの条件で、そのタイミングでギミックを仕込む。結構汎用性は高い。

        let nowPosition = $(window).scrollTop();
        let targetPosition = $('#sample').scrollTop();
        let targetHeight = $('#sample').height();

        if(nowPosition <= targetPosition && nowPosition >= targetPosition + targetHeight){
            //#sampleが表示されてない間
        }else{
            //#sampleが表示されている間
        }

体感的に、指定位置に来た瞬間よりはその手前とか過ぎた後とか、ちょっと余裕を持たせて発火させたほうが自然というかキモくないというか。「1画面分過ぎたら」よりは「1.2～1.5画面分過ぎたら」のがなんとなく好き。

例えば

display:fixed;の固定表示する要素に使うのが多いか。

キービジュアルを過ぎたらバナーを固定表示するとか、定位置の購入ボタンが表示されてない間は固定表示するとか。LPとかECでよく見るかも。「ページトップに戻る」のボタンもこれでいける。

まとめ

固定表示のPR用コンテンツは初めから表示してなんぼというのはアドセンスとか広告類の話。自社コンテンツの一つとして使うなら、常設で画面がうるさいという状況を回避できるわけで。

手間はそんなにないので導入にあたってのストレスはそこまでのものじゃない。なので、+αで装飾したいときの手段とか、ちょっとページをリッチにしたいときとかに向いてると思う。ここのところよく使ってる。