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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

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

Q&A

解決済

1回答

3921閲覧

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

j123

総合スコア15

JavaScript

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

0グッド

1クリップ

投稿2018/01/11 05:08

編集2018/01/11 05:44

###前提・実現したいこと
現在レスポンシブで作成された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%;} }

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kogure

2018/01/11 05:24

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

2018/01/11 05:46 編集

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

回答1

0

ベストアンサー

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

html

1<div id="main"> 2 <div id="Floating"> 3 <a href="https://.....">top</a> 4 </div> 5</div> 6 7<footer id="footer"> 8 <div class="item"></div> 9 <div class="item"></div> 10 <div class="item"></div> 11 <div class="item"></div> 12 <div class="item"></div> 13</footer>

js

1$(document).ready(function() { 2 var topBtn = $('#Floating'); 3 4 $(window).scroll(function () { 5 var scroll = $(window).scrollTop() // スクロール量; 6 var scrollHeight = $(document).height(); //ドキュメントの高さ 7 var scrollPosition = $(window).height() + $(window).scrollTop(); //現在地 8 var footerHeight = $("#footer").innerHeight(); // footerの高さ 9 10 if (scroll > 600) { // 600pxで表示 11 topBtn.fadeIn(); 12 if (scrollHeight - scrollPosition < footerHeight) { 13 topBtn.addClass('at_bottom'); 14 } 15 else { 16 topBtn.removeClass('at_bottom'); 17 } 18 } else { 19 topBtn.fadeOut(); 20 } 21 22 }); 23});

css

1#main { 2 min-height: 2000px; 3 position: relative; 4} 5 6#Floating { 7 display: none; 8 border: 1px solid #ddd; 9 position: fixed; 10 bottom: 10px; 11} 12 13#Floating.at_bottom { 14 position: absolute; 15 bottom: 10px; 16} 17 18#footer { 19 background: #eee; 20 padding: 5px; 21} 22 23#footer .item { 24 display: inline-block; 25 height: 100px; 26 width: 200px; 27 background: #ddd; 28}

投稿2018/01/11 05:53

teng

総合スコア127

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

j123

2018/01/11 06:53

tengさま 早速ご回答ありがとうございます! シンプルでわかりやすいので、 こちらの記述で進めさせてもらっているのですが、、、 やはりなぜかwindow widthが768px〜850px前後の時はfooterの高さが低すぎるため?か、 (丸一日格闘してますが、原因がはっきりせず。。干渉はないようなのですが。。) フローティングバナーが消えてくれません。。 ですので、footerHeight +150 にして、なんとかごまかそうかと思っているのですが、 (+150すると、768pxでもギリギリ消えてくれますので。) 他になにか良い方法はありませんでしょうか? せっかく綺麗な記述をお教えいただき恐縮ですが、 よろしくお願い致します。
teng

2018/01/11 07:19

フッター上部にうまく固定できる場合はフローティングバナーを消す必要はないと考えていました。 デモは見ていただけましたでしょうか? 理想の挙動とどこがどう違うのか具体的に教えていただけますか フローティングバナーの挙動は ・最初どうなっていて ・なんの操作によりどうなってほしい ・でもここがうまくいかない そもそも「消す」とはどういう動きを想定していますか? 画面外に出ればいいのか、fadeOutしてほしいのか、、、 いずれにせよ実現可能なものだとは思うので、よろしくおねがいします!
j123

2018/01/11 07:43

tengさん お返事ありがとうございます! デモは勿論拝見させていただいてます。 デモのようになればよいのですが、 同じように記述をしても、なぜかフッター上部にのってくれません。。横幅を変えると出てくる位置が変わってきます。 フローティングバナーの挙動は ・最初どうなっていて → 600pxをスクロールして、問題なく現れます。 ・なんの操作によりどうなってほしい → フッター上部、正確には、フッター上部にある、バナーの位置(フローティングバナーと全く同じバナー)にきた時に、同じ場所に止まってほしい。 ・でもここがうまくいかない → 横幅を変えると、フローティングバナーの現れる場所が変わる。横幅を狭めるにつれ、バナーの位置を過ぎてから表示されていきます。これが謎です。 ですので、とどまるのではなく、横幅が変わっても対応できるように、フッター上部にきた時に「消す」ことで代替の対応をしたかった次第です。 fadeOutした方が綺麗に消えてくれるので、代替案の理想は、fadeOutで消えてくれることです。 複雑な作りの企業のキャンペーンLPですので、 再現するためのhtmlをそのままここに記載できず大変恐縮なのですが、 当方もぶち当たったことのないトラブルで、1日以上色々試し、どうにも解決できないため、質問させていただいた次第です。 お手数ですが、よろしくお願い致します!
teng

2018/01/11 08:17

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

2018/01/12 12:48

tengさま せっかくお返事いただいていたのに遅くなり申し訳ありません。。 cssが原因というか、htmlの作り自体に問題があるかも。ということですね。 月曜まで今回の作業ができないため、 月曜に再度閉じタグ等が消えていないか、cssがおかしくないか等確認し、 改めてこちらに報告させていただきますね。 >たぶんですけど消す消さないは考えなくても、ぴったりフッター上部で止められると思います。 心強いお言葉ありがとうございます! 月曜(火曜になるかも)、お手数おかけしますが、 よろしくお願いいたします。
j123

2018/01/15 01:01 編集

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の間だけ、フェードアウトを少し上の方でできるようにできれば、もうそれで諦めようかと思っているので、その場合の代替案をお教えていただければありがたいです。
j123

2018/01/15 01:54

tengさま 何度も申しわけありません。 トラブルの原因となっている<div>を、html内に発見しました。。 この<div>がかなり複雑な作りとなっているようで、 解決にはまだ時間を要するような感じですが、 とりあえずJavascriptの記述は、 tengさまにお教え頂いたもので問題なく使用できそうです。 ありがとうございました! P.S. 可能であれば、先ほどの最後の「P.S.」にて記載した、ある横幅のみにフェードアウトできるJavascriptの記述も、参考までに教えていただければありがたいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問