質問編集履歴

1 大変失礼しました。html, cssはこのようになります。宜しくお願い致します。

j123

j123 score 1

2018/01/11 14:44  投稿

レスポンシブで作成されたLPにて、footer周辺に固定で移動するフローティングバナーを出したい。
###前提・実現したいこと
現在レスポンシブで作成された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%;}
}
```
  • JavaScript

    21030 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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