質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

7956閲覧

スクロールしたら表示されるバナーを閉じるを押したら、再度スクロールしても再表示されないようにしたい。

miumiu36

総合スコア7

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/01/06 07:53

編集2017/01/06 08:00

###前提・実現したいこと
ワードプレスでテーマはsimplicity子テーマを使い、サイトを作成しています。
フッターの所(画面の一番下)に固定されて表示されるオーバーレイバナーを作りたいです。
ある程度スクロールしたら表示されて、閉じるのボタンを押せば非表示になるようにしたいです。

###発生している問題・エラーメッセージ
一番解決したい
①今の段階で、ある程度スクロールしたら表示されるようになり、閉じるボタン押しても非表示は実現できてますが、その後スクロールすると再度バナーが表示されてしまいます。閉じるボタンを押したらスクロールしても再表示されないようにしたい。

次に解決したい
②bottom: 0pxにしているのにバナーが画面の一番下に表示されず、一番下から少し上に表示される。

次の次に解決したい
③閉じるボタンのクリックの範囲を閉じるボタンの画像の部分だけにしたい。今は画像が表示されている列全体に範囲がある

###該当のソースコード
html

<div id="banner"> <div id="bannerin"><a href="http://....."><img src="http://....jpg" /></a> <p id="closebanner"><a><img src="http://......jpg" /></a></p> </div></div>

CSS

#bannerin { display: block; width: 100%; position: fixed; left: 0px; bottom: 0px; z-index: 998; text-align: center; padding: 0 auto; } #closebanner { width: 100%; position: fixed; left: 0px; bottom: 1px; z-index: 999; text-align: right; padding: 0 auto; }

footer-insert.php

<script> jQuery(function() { var bann = jQuery('#banner'); bann.hide(); jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 400) { // 400pxで表示 bann.fadeIn(); } else { bann.fadeOut(); } }); }); </script> <script> jQuery('#closebanner').click(function(){ jQuery('#banner').hide(); }); </script>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

変数に明示的にクローズが押されたかどうかを保持しておけばいいのではないでしょうか
なお、最初に描画するときにバナーが一瞬ちらつくので、javascriptで消すのではなく、css等でdisplay:noneにしておいたほうがいいと思います。

javascript

1<script> 2var isClosed = false; 3jQuery(function() { 4 var bann = jQuery('#banner'); 5 bann.hide(); 6 jQuery(window).scroll(function () { 7 if(isClosed) { 8 return; 9 } 10 if (jQuery(this).scrollTop() > 400) { // 400pxで表示 11 bann.fadeIn(); 12 } else { 13 bann.fadeOut(); 14 } 15 }); 16}); 17jQuery('#closebanner').click(function(){ 18 jQuery('#banner').hide(); 19 isClosed = true; 20}); 21</script>

JSFiddleの動くサンプル

投稿2017/01/07 08:03

編集2017/01/10 06:49
popobot

総合スコア6586

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miumiu36

2017/01/10 06:39

icchiiさんありがとうございました。おかげで実現できました。そこまで気にならないのですが、伝わりづらいとは思いますが、バナーがどうしても一番下にならず1pxくらいあいてしまいますね…。BOX生成されているからかもしれません…。
popobot

2017/01/10 06:51

どっかにmarginとかが残っているんですかね... ブラウザのデベロッパーツールで見れば影響しているstyleが確認できると思いますよ
ryu0947

2020/04/12 02:54

質問された内容とは少し違いますが、jQueryでスクロールされたら表示されるポップアップの実装をしていて質問者さんと同じく閉じるボタンを押して閉じてもスクロールすると再び表示されてしまっていたので困っていた所でした。 popbotさんの回答のコードで試した所実現できたのですごく助かりました!! ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問