フローティングアイテムをフッターの上で止める方法です。フッターと色が被ったりしてフッター上で止めるという実装もたまにやりたくなります。
今はCSSのposition: stickyだけで、フッターの上で止めることができます。この記事では先にCSSだけの方法を紹介します。
jQueryを使ってフッターの高さやスクロールの位置を取得するやり方は、補足として後半に残しています。
動きとしては以下のような感じになります。（右下の「トップへ」というボタンが固定されています）
CSSの position: sticky だけで止める方法
position: stickyを指定した要素は、スクロールに合わせて画面の決まった位置に貼り付きます。ただし、親要素の外には出ません。この性質を使うと、フッターの手前で自然に止まります。
フローティングアイテムは、フッターより前にある要素（ここではmain）の一番最後に置きます。
<main>
<p>ページの中身</p>
<div class="floating">
<a href="#">トップへ</a>
</div>
</main>
<footer id="footer">フッター</footer>.floating {
position: sticky;
bottom: 10px;
width: fit-content;
margin-left: auto;
margin-right: 10px;
}
.floating a {
display: block;
color: #fff;
background: #666;
padding: 8px;
text-decoration: none;
}bottom: 10pxで画面の下から10pxの位置に貼り付き、親要素のmainの終わりまでスクロールすると、そこで止まります。フッターはmainの外にあるので、フッターには重なりません。JavaScriptは必要ありません。
注意点が2つあります。1つ目は、fixedと違ってstickyの要素は元の位置に自分の高さ分の場所を取ることです。2つ目は、親や祖先の要素にoverflow: hiddenなどが指定されていると、思ったように貼り付かないことです。
ここからは補足として、jQueryでフッターの高さやスクロールの位置を取得して止める方法です。HTMLの構造の都合でstickyが使えないときなどに参考にしてください。
補足：jQueryでフッターの上で止めるコード
それでは早速コードを書いていきます！HTMLとCSSで基本のコードを書きつつ、jQueryで処理を実装する感じになります。
<div class="floating">
<a href="#">トップへ</a>
</div>bodyからabsoluteを使いたいので指定してあげてください。別の要素でラップしてあげてもOKです。
body {
position: relative;
}
.floating {
position: fixed;
right: 10px;
bottom: 10px;
}
.floating a {
display: block;
color: #fff;
background: #666;
padding: 8px;
text-decoration: none;
}トップへ戻るの実装方法は下記の記事と同様です。こちらの記事を参考にしていただければと思います。
スクロールの途中で出現するフローティングボタンのJavaScript
そして、下記のコードを加えることでフッターの高さを計算しつつ、.floatingの要素が#footerの上で止まるような動きをしています。
下記コードをそのまま使う場合はフローティングアイテムのクラスを.floating。フッターは#footerのidを指定してあげてください。
jQuery(window).on("scroll", function() {
documentHeight = jQuery(document).height();
scrollPosition = jQuery(this).height() + jQuery(this).scrollTop();
footerHeight = jQuery("#footer").innerHeight();
if (documentHeight - scrollPosition <= footerHeight) {
jQuery(".floating").css({
position: "absolute",
bottom: footerHeight + 10
});
} else {
jQuery(".floating").css({
position: "fixed",
bottom: 10
});
}
});jQueryの各種ポジション（位置）のおさらい
jQuery(document).height()・・・ページ全体の高さjQuery(window).height()・・・表示されているウインドウの高さjQuery(window).scrollTop()・・・（ページの一番上からの）スクロールの量
jQuery("#footer").innerHeight()・・・フッターの高さ（paddingなども含めた高さです）
今回jQueryで取得できる全体的な位置関係を一つにまとめると以下のようになります。
ページ全体の高さから、トップからのスクロール量を引いて、フッターの高さより小さくなるなら、fixedを止めるという処理を行っています。
通常は、fixedで動かしつつ、フッターにかぶりそうになったら、body下からのabsoluteでフッターの高さ分を指定してあげて固定します。
フローティングアイテムを途中から表示する
スクロールイベントを使っているのでついでにフローティングアイテムをスクロールの途中から表示されるという処理もやっていきましょう。以下の記事で紹介しているヘッダーを途中から表示させる場合と同様の処理になります。
途中からヘッダー固定にする方法！画面上部までスクロールされたら固定する
最初は非表示にしたいので、以下のcssを追加してあげます。
.floating {
display: none;
}そして、スクロール量が100pxを超えたら表示させてあげる処理を加えます。
jQuery(window).on("scroll", function() {
if (100 < jQuery(this).scrollTop()) {
jQuery(".floating").css({
display: "block",
});
} else {
jQuery(".floating").css({
display: "none",
});
}
});これで、スクロールしたら表示されるという動きにすることができました。
おわり
fixedで固定したフローティングアイテムをフッターの上で止める方法でした。
今はまずposition: stickyで止められないかを試し、難しい場合にjQueryの方法を使うのがおすすめです。
フッターの上に止めることもそうですが、画面上の位置を取得するjQueryの各種の値はゴチャゴチャして分かりにくいですが、、、使えるようになっておくとちょっとしたイレギュラーな動きを付ける時に重宝したりします。
