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

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

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

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

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

ただ、今回は

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

ということです。

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

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

まずはHTMLから…

<section class="mainContents">
<div id="btnBlock">
  <p>[Aブロック]ここに最初から表示するコンテンツ</p>								
</div>
</section>


<div id="FormBtn">
  <p>Bブロック]Aブロックが可視範囲から消えたらfiexdで横から表示されるコンテンツ</p>								
</div>

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

#btnBlock {
	width: 100%;
	margin-top: 20px;
}
		
#formBtn {
	position: fixed;
	right: 0;
	top: 50%;
	z-index: 999;
}

問題のJSです。

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

<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>

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

• blog,
• code,
• web