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

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

ただいまの
回答率

90.84%

  • JavaScript

    14837questions

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

レスポンシブで作成されたLPにて、footer周辺に固定で移動するフローティングバナーを出したい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 527

j123

score 1

前提・実現したいこと

現在レスポンシブで作成された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%;}
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kogure

    2018/01/11 14:24

    html、cssファイルも記述いただけますか?(質問内容を再現できるレベルで。)

    キャンセル

  • j123

    2018/01/11 14:45 編集

    kogureさま 大変失礼しました。 html, css記載しましたので、 ご確認いただけますでしょうか。 よろしくお願い致します。

    キャンセル

回答 1

checkベストアンサー

+2

どうぞ
スタイル関係はcssにまとめました
画面下部がフッターに差し掛かったタイミングでposition: absoluteに変更しています
-> デモ

<div id="main">
  <div id="Floating">
    <a href="https://.....">top</a>
  </div>
</div>

<footer id="footer">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</footer>
$(document).ready(function() {
  var topBtn = $('#Floating');

  $(window).scroll(function () {
   var scroll = $(window).scrollTop() // スクロール量;
      var scrollHeight = $(document).height(); //ドキュメントの高さ 
    var scrollPosition = $(window).height() + $(window).scrollTop(); //現在地 
    var footerHeight = $("#footer").innerHeight(); // footerの高さ

    if (scroll > 600) { // 600pxで表示
      topBtn.fadeIn();
      if (scrollHeight - scrollPosition < footerHeight) {
        topBtn.addClass('at_bottom');
      }
      else {
          topBtn.removeClass('at_bottom');
      }
    } else {
      topBtn.fadeOut();
    }

  });
});
#main {
  min-height: 2000px;
  position: relative;
}

#Floating {
  display: none;
  border: 1px solid #ddd;
  position: fixed;
  bottom: 10px;
}

#Floating.at_bottom {
  position: absolute;
  bottom: 10px;
}

#footer {
  background: #eee;
  padding: 5px;
}

#footer .item {
  display: inline-block;
  height: 100px;
  width: 200px;
  background: #ddd;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/11 15:53

    tengさま
    早速ご回答ありがとうございます!

    シンプルでわかりやすいので、
    こちらの記述で進めさせてもらっているのですが、、、
    やはりなぜかwindow widthが768px〜850px前後の時はfooterの高さが低すぎるため?か、
    (丸一日格闘してますが、原因がはっきりせず。。干渉はないようなのですが。。)
    フローティングバナーが消えてくれません。。

    ですので、footerHeight +150 にして、なんとかごまかそうかと思っているのですが、
    (+150すると、768pxでもギリギリ消えてくれますので。)
    他になにか良い方法はありませんでしょうか?

    せっかく綺麗な記述をお教えいただき恐縮ですが、
    よろしくお願い致します。

    キャンセル

  • 2018/01/11 16:19

    フッター上部にうまく固定できる場合はフローティングバナーを消す必要はないと考えていました。
    デモは見ていただけましたでしょうか?
    理想の挙動とどこがどう違うのか具体的に教えていただけますか

    フローティングバナーの挙動は
    ・最初どうなっていて
    ・なんの操作によりどうなってほしい
    ・でもここがうまくいかない

    そもそも「消す」とはどういう動きを想定していますか?
    画面外に出ればいいのか、fadeOutしてほしいのか、、、
    いずれにせよ実現可能なものだとは思うので、よろしくおねがいします!

    キャンセル

  • 2018/01/11 16:43

    tengさん
    お返事ありがとうございます!

    デモは勿論拝見させていただいてます。
    デモのようになればよいのですが、
    同じように記述をしても、なぜかフッター上部にのってくれません。。横幅を変えると出てくる位置が変わってきます。

    フローティングバナーの挙動は
    ・最初どうなっていて → 600pxをスクロールして、問題なく現れます。
    ・なんの操作によりどうなってほしい → フッター上部、正確には、フッター上部にある、バナーの位置(フローティングバナーと全く同じバナー)にきた時に、同じ場所に止まってほしい。
    ・でもここがうまくいかない → 横幅を変えると、フローティングバナーの現れる場所が変わる。横幅を狭めるにつれ、バナーの位置を過ぎてから表示されていきます。これが謎です。
    ですので、とどまるのではなく、横幅が変わっても対応できるように、フッター上部にきた時に「消す」ことで代替の対応をしたかった次第です。
    fadeOutした方が綺麗に消えてくれるので、代替案の理想は、fadeOutで消えてくれることです。


    複雑な作りの企業のキャンペーンLPですので、
    再現するためのhtmlをそのままここに記載できず大変恐縮なのですが、
    当方もぶち当たったことのないトラブルで、1日以上色々試し、どうにも解決できないため、質問させていただいた次第です。

    お手数ですが、よろしくお願い致します!

    キャンセル

  • 2018/01/11 17:17

    なるほど、丁寧にありがとうございます

    >横幅を狭めるにつれ、バナーの位置を過ぎてから表示されていきます。これが謎です。
    要はフッター上にボタンが乗って表示されるような状態でしょうか?
    だとすると#mainと#footerがかぶっている可能性がありますので、
    html, body, #main, #footer, #Floating関連だけでいいのでcss全文のせていただけますか?

    たぶんですけど消す消さないは考えなくても、ぴったりフッター上部で止められると思います。

    キャンセル

  • 2018/01/12 21:48

    tengさま
    せっかくお返事いただいていたのに遅くなり申し訳ありません。。

    cssが原因というか、htmlの作り自体に問題があるかも。ということですね。
    月曜まで今回の作業ができないため、
    月曜に再度閉じタグ等が消えていないか、cssがおかしくないか等確認し、
    改めてこちらに報告させていただきますね。

    >たぶんですけど消す消さないは考えなくても、ぴったりフッター上部で止められると思います。

    心強いお言葉ありがとうございます!
    月曜(火曜になるかも)、お手数おかけしますが、
    よろしくお願いいたします。

    キャンセル

  • 2018/01/15 10:00 編集

    tengさま

    遅くなりましたが、以下がcssになります。
    textのcss等、全く関係ないものは省いています。

    ```css
    body {
    min-width: 1120px;
    }
    #main {
    position: relative;
    }
    #Floating {
    display: none;
    width: 100%;
    position: fixed;
    bottom: 10px;
    z-index: 999;
    text-align: center;
    margin: 0 auto;
    }
    #Floating.at_bottom {
    position: absolute;
    bottom: 10px;
    }
    #Floating img {
    max-width: 99%;
    }
    #footer {
    text-align: center;
    color: #fff;
    padding: 56px 0 40px;
    position: relative;
    }
    @media screen and (max-width:767px) {
    body {
    min-width: 0;
    }
    #footer {
    padding: 20px 0;
    }
    }
    ```

    なんどもhtml,cssを確認し、htmlの作りをいただいたものと同じにしたとろころ、
    320~767、860〜はfooter上部にきちんと固定されるようになり、挙動は改善したのですが、
    768〜859pxが、どうしてもfooterを無視して、下から10pxに固定される形となり、かぶってしまいます。
    分岐点も767pxのみなのですが。。

    こちらで何かおわかりになることがあれば
    教えていただければ幸いです。

    よろしくお願い致します。

    P.S. 768〜859pxの間だけ、フェードアウトを少し上の方でできるようにできれば、もうそれで諦めようかと思っているので、その場合の代替案をお教えていただければありがたいです。

    キャンセル

  • 2018/01/15 10:54

    tengさま

    何度も申しわけありません。
    トラブルの原因となっている<div>を、html内に発見しました。。
    この<div>がかなり複雑な作りとなっているようで、
    解決にはまだ時間を要するような感じですが、
    とりあえずJavascriptの記述は、
    tengさまにお教え頂いたもので問題なく使用できそうです。


    ありがとうございました!

    P.S. 可能であれば、先ほどの最後の「P.S.」にて記載した、ある横幅のみにフェードアウトできるJavascriptの記述も、参考までに教えていただければありがたいです。

    キャンセル

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    14837questions

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