質問編集履歴

1 誤字

miumiu36

miumiu36 score 5

2017/01/06 17:00  投稿

スクロールしたら表示されるバナーを閉じるを押したら、再度スクロールしても再表示されないようにしたい。
###前提・実現したいこと
ワードプレスでテーマはsimplicity子テーマを使い、サイトを作成しています。
フッターの所(画面の一番下)に固定されて表示されるオーバーレイバナーを作りたいです。
ある程度スクロールしたら表示されて、閉じるのボタンを押せば非表示になるようにしたいです。
###発生している問題・エラーメッセージ
一番解決したい
①今の段階で、ある程度スクロールしたら表示されるようになり、閉じるボタン押しても非表示は実現できてますが、その後スクロールすると再度バナーが表示されてしまいます。閉じるボタンを押したらスクロールしても再表示されないようにしたい。
次に解決したい
②bottom: 0pxにしているのにバナーが画面の一番下に表示されず、一番下から少し上に表示される。
次の次に解決したい
③閉じるボタンのクリックの範囲を閉じるボタンの画像の部分だけにしたい。今は画像が表示されている列全体に範囲がある
###該当のソースコード
html
```ここに言語を入力
<div id="banner">
<div id="bannerin"><a href="http://....."><img src="http://....jpg" /></a>
<p id="closegoldbanner"><a><img src="http://......jpg" /></a></p>
<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;
}
#closegoldbanner
#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('#closegoldbanner').click(function(){
jQuery('#closebanner').click(function(){
       jQuery('#banner').hide();
   });
</script>
```
###試したこと
課題に対してアプローチしたことを記載してください
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
  • HTML

    15860 questions

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

  • CSS

    10781 questions

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

  • jQuery

    10315 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る