###前提・実現したいこと
ワードプレスでテーマは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/ツール等のバージョンなど)
より詳細な情報
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/10 06:39
2017/01/10 06:51
2020/04/12 02:54