###前提・実現したいこと
現在レスポンシブで作成されたLPにて、footer周辺に固定でフローティングバナーを出す作業を行っているのですが、
レスポンシブのためfooterの高さが変動し、
横幅が768~1100周辺になると、高さがとれずfooterより下にきたり、位置がずれたりと思うように動いてくれません。
(768で分岐しています。)
ですので、
footer周辺にきた時にフローティングバナーが消えるように(footer周辺に同じバナーがあるため)
以下のような記述でなんとかならないものかと試してみたのですが、
ページの最下部になると再表示されてしまうなど、なかなか思い通りの挙動になってくれません。
<script> $(document).ready(function() { var topBtn = $('#Floating'); topBtn.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 600) { // 600pxで表示 topBtn.fadeIn(); } else { topBtn.fadeOut(); } scrollHeight = $(document).height(); //ドキュメントの高さ winHeight = $(window).innerHeight(); //ウィンドウの高さ scrollPosition = $(window).height() + $(window).scrollTop(); //現在地 footHeight = $(".footer").innerHeight() + 300; //止めたい位置 if ( scrollHeight - scrollPosition <= footHeight ) { topBtn.css({"position":"absolute","bottom":footHeight+10}); } else { topBtn.css({"position":"fixed","bottom":"10px"}); } }); }); </script>
###試してみた代替案
ページ最下部の情報を取得をし、そこでdisplay:none;にしてみましたが、これでもfooterより下にくると、フローティングバナーがあらわれてしまいます。
<script> $(document).ready(function() { var topBtn = $('#Floating'); topBtn.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 600) { // 600pxで表示 topBtn.fadeIn(); } else { topBtn.fadeOut(); } scrollHeight = $(document).height(); //ドキュメントの高さ winHeight = $(window).innerHeight(); //ウィンドウの高さ pageBottom = scrollHeight - winHeight; //ドキュメントの高さ - ウィンドウの高さ scrollPosition = $(window).height() + $(window).scrollTop(); //現在地 footHeight = $(".footer").innerHeight() + 300; //止めたい位置 if ( scrollHeight - scrollPosition <= footHeight ) { topBtn.css({"display":"none"});//"position":"absolute","bottom":footHeight+10}); } else if ((scrollHeight - scrollPosition) / scrollHeight === 0) {// ページ最下部にきた時 topBtn.css({"display":"none"}); } else { topBtn.css({"position":"fixed","bottom":"10px"}); } }); }); </script>
###求めている動作
1,スクロールを600pxすれば下から10pxの位置にフローティングバナーが現れ、
2,footer周辺にくると、footer上部あたりにフローティングバナーが固定され移動する。
2の代替案,footer周辺にくると、フローティングバナーが消えるようにする。(2で正確に高さがとれないため)
このようにしたく思っています。
当方、webデザイナーですが、javascriptはあまり詳しくないため、初歩的なミスがあるかもしれません。
何がおかしいかお分かりになる方、おられましたら、ご教授いただけないでしょうか?
よろしくお願い致します。
###html
<html> <body> <header id="header">…</header> <div id="main"> …かなり長めです。 <div><a href="https://....."><img src="img/floatingBNR.png"></a></div> </div> <footer id="footer"> <p class="pagetop"><a href="#"><img src="img/pagetop.gif" width="56" height="72" alt="ページトップへ"></a></p> <div class="contentIn"> <p>© 2018 〇〇 INC., All Rights Reserved</p> </div> </footer> <div id="Floating"> <a href="https://....."><img src="img/floatingBNR.png"></a> </div> </body> </html>
###css
#Floating { display: block; width: 100%; position: fixed; left: 0px; bottom: 2px; z-index: 999; text-align: center; margin: 0 auto; } #Floating img { max-width: 99%; } @media screen and (max-width:767px) { #Floating img {max-width: 92%;} }
回答1件
あなたの回答
tips
プレビュー