特定の要素が可視範囲から消えたら別の要素を表示する方法

はい！みなさんこんにちは。

今日はタイトルの通り特定の要素が可視範囲から消えたら
別の要素を表示する方法をご紹介します。

これ、何かよくあるパターンと違うかというと
よくあるパターンは

・１つの要素をスクロール量によって表示したり、非表示にしたりするパターン
・特定の要素が可視範囲に入ったら、アニメーションをするパターン

がブログなどでよく紹介されています。

ただ、今回は

Aというブロックが最初から表示されていて
そのAブロックが可視範囲から削除されると
べつのBというブロックを表示する

ということです。

で最初は私もいろんな方のブログを見てまわって、いろいろ
やってみたんですけど全然うまくいかない！

ということで、エンジニアさんに相談してソースを提供してみました！
それが下記になります。

まずはHTMLから…

1
2
3
4
5
6
7
8
9
10
<section class="mainContents">
<div id="btnBlock">
  <p>[Aブロック]ここに最初から表示するコンテンツ</p>                               
</div>
</section>
 
 
<div id="FormBtn">
  <p>Bブロック]Aブロックが可視範囲から消えたらfiexdで横から表示されるコンテンツ</p>                             
</div>

という感じ。
CSSはもっと簡単。
あとは好きなように装飾してください。

1
2
3
4
5
6
7
8
9
10
11
#btnBlock {
    width: 100%;
    margin-top: 20px;
}
         
#formBtn {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 999;
}

問題のJSです。

分岐は、最初からBブロックを表示させる必要があるかどうかで
わけます。Bブロックが最初から出ている場合は下記の分岐は不要です！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
    $(document).ready(function() {
        $("#formBtn").hide();
        var top = $("#btnBlock").offset().top; // ターゲットの位置取得
        if($(window).height() < top) {
        //　最初に#btnBlockが見えてない場合
            $("#formBtn").show();
        }
    });
    $(window).scroll(function(){
        var top = $("#btnBlock").offset().top; // ターゲットの位置取得
        if($(window).height() > top) {
        // 最初に#btnBlockが見えている場合
            if($(window).scrollTop() > top){
                $("#formBtn").fadeIn();
            }else{
                $("#formBtn").fadeOut();
            }
        }else{
        // 最初に#btnBlockが見えていない場合
            if($(window).scrollTop() + $(window).height() > top && $(window).scrollTop() < top){
                $("#formBtn").fadeOut();
            }else{
                $("#formBtn").fadeIn();
            }
        }
    });
</script>

以上です！エンジニアさんありがとうございます！
みなさんのお役に立てれば幸いです。

Share: