jQueryでスクロールしたらポップアップを表示させて閉じるボタンを押したら消したいけど上手く動作しない

前提・実現したいこと

jQueryでページを一定量スクロールしたらポップアップを表示させて閉じるボタンを押して閉じられるようにしたいです。

現状スクロールしたらポップアップを表示させてボタンを押したら閉じるようにする事は出来ましたが
閉じた後スクロールするとまたポップアップが出てきてしまいます。

やりたい事としてはポップアップを表示させて閉じたあとは表示させないようにしたいです。

該当のソースコード

HTML
1<div id="popup">
2        <div class="popup-content">
3            <p>ポップアップ</p>
4            <button>閉じる</button>
5        </div>
6    </div>

jQuery
1<script>
2    $(function() {
3        var popup = $('#popup')
4        $(window).scroll(function() {
5            if ($(this).scrollTop() > 300) {
6                popup.fadeIn();
7            } else {
8                popup.hide();
9            }
10        });
11        $('button').click(function() {
12            $('#popup').hide();
13        });
14    });
15</script>

試したこと

何とか解決しようとググっていますが、clickイベントでポップアップを実装する方法しか見つからず
scrollイベントで実装する方法が見つけられていません。
また閉じた後に表示させない方法としてブラウザのcookieを使う方法がありますがscrollイベントとどう組み合わせたらいいのか全く分かりませんでした。

行動規範の内容に同意します

回答3件

ベストアンサー

js
1    $(function() {
2        var popup = $('#popup');
3        var flag = true; // （コードは書いていないけど）ローカルストレージにでも保存しておけばいい
4        $(window).scroll(function() {
5            if (flag && $(this).scrollTop() > 300) {
6                popup.fadeIn();
7            } else {
8                popup.hide();
9            }
10        });
11        $('button').click(function() {
12            flag = false; // （コードは書いていないけど）ローカルストレージにでも保存しておけばいい
13            $('#popup').hide();
14        });
15    });

【Window.localStorage - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

【ブラウザにデータを保存するlocalStorage（ローカルストレージ）の使い方 | 株式会社グランフェアズ】
https://www.granfairs.com/blog/staff/local-storage-01

投稿2020/04/12 02:28

kei344

総合スコア69608

ryu0947

2020/04/12 03:42

ご回答頂きありがとうございます! ローカルストレージ。全く知らなかったです。これを使えば別ページに移動して戻ってきてもポップアップが表示されないですね。お手数をおかけして申し訳ないのですが、ローカルストレージの概念は理解できましたが実際にどこにどう書いたら良いのかが理解できていません... コメントをつけてくださったvar flag = true/falseの箇所にlocalStorage.setItem('キー', '値');でローカルストレージへ保存してlocalStorage.getItem('キー');で保存された値を取り出す形でよろしいのでしょうか？

kei344

2020/04/12 04:32

「var flag = true/falseの箇所」に保存しておいたキーがあれば代入し、保存していなかったら初期値を入れます。クリック時にキーを保存します。

ryu0947

2020/04/12 06:59

ありがとうございます！がんばって実装してみます！！

行動規範の内容に同意します

javascript
1<script>
2    let opened = false;
3    $(function() {
4        var popup = $('#popup')
5        $(window).scroll(function() {
6            if (opened == false && $(this).scrollTop() > 300) {
7                opened = true;
8                popup.fadeIn();
9            } else {
10                popup.hide();
11            }
12        });
13        $('button').click(function() {
14            $('#popup').hide();
15        });
16    });
17</script>