スクロールすると出てくるバナーを閉じたい。

Question

スクロールすると出てくるバナーを閉じたい。

javascriptでスクロールすると出てくるバナーを作り
閉じるボタンを押すと消えるようにしたのですが、
消した後にスクルールするとまた出てきてしまいます。

一度消したらもう出てこないようにしたいです。

該当のソースコード

javascript

$(function() {
    var topBtn = $('.bnr_camp');
    topBtn.hide();
    //スクロールが300に達したらバナー表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
        //バナーの表示方法
            topBtn.fadeIn();
        } else {
        //バナーの非表示方法
            topBtn.fadeOut();
        }
    });
    // 閉じるボタン
    topBtn.click(function () {
        $(this).css("display","none");
    });
});

Answer 1

    // 閉じるボタン
    topBtn.click(function () {
        $(window).off('scroll'); // add
        $(this).css("display","none");
    });

https://api.jquery.com/off/#off-event

Comments

[donkuri]

おおお　これもできました！
ありがとうございました。

[redshoga]

こっちの方がスマートですね。

[donkuri]

そうなんですね。
クリックでスクロールイベントもoffにする、みたいな意味でしょうか。
どちらも勉強になりました。

Answer 2

閉じるボタンをクリックしたらクリックした情報をどこかの変数に保存するのはどうでしょう?

実行してチェックしていないのでミスがあったら申し訳ないです。

$(function() {
    var topBtn = $('.bnr_camp');
    var closeButtonClicked = false;

    topBtn.hide();
    //スクロールが300に達したらバナー表示
    $(window).scroll(function () {
        if (closeButtonClicked) return; // クリックされていたら以下を実行しない。
        if ($(this).scrollTop() > 300) {
        //バナーの表示方法
            topBtn.fadeIn();
        } else {
        //バナーの非表示方法
            topBtn.fadeOut();
        }
    });
    // 閉じるボタン
    topBtn.click(function () {
        $(this).css("display","none");
        closeButtonClicked = true;
    });
});

Comments

[donkuri]

おお　すごい！できました！
コードを調べて勉強します。ありがとうございました。