TOP追従ボタン改修したい

題名の通り、スクロールすると表示されるTOPボタンを下記の条件に沿って改修したいと考えております。
（jqueryに関して勉強中で恐縮です。）

【①改修したい内容】
・footerエリア頭部とTOP追従ボタン画像半分分が重なったらボタンはその位置から下にはスクロールしないようにさせたい。
・jqyeryでの動作を簡潔化したい。（例：ボタンの表示・非表示をクラス付与で行うなどCSSと連携できるところは連携する）

【②絶対条件（実装済み）】
・FVコンテンツが画面外になった時にTOP追従ボタンが表示される（高さ指定ではない）

ソースコード記載の上、解説をいただけますと幸いでございます。

html

<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>test</title>
<meta name="description" content="test">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">
</header>
<section id="wrapper">
<div id="fv"></div><!--ここをスクロールしたら追従ボタン表示-->
<section id="sec_01"></section>
<section id="sec02"></section>
</section>
<p id="pageTop" class="js-mouseOver01"><a href="#header"><img src="img/pagetop.png" alt="このページのTOPへ"></a></p>
<footer id="footer"></footer><!--半分重なったらボタン位置固定-->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/base.js"></script>
</body>
</html>

css

/* ↓リセットCSS↓ */
@charset "UTF-8";
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
form { display: block; }
html { font-size: 23.4375px; font-size: 3.125vw; }
body { color: #000; line-height: 1; overflow-y: scroll; }
input[type=email], input[type=number], input[type=tel], input[type=text], select, textarea { width: 100%; height: 40px; padding-left: 10px; padding-right: 10px; border: 1px solid #a1a1a1; box-sizing: border-box; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }
input[type=email]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=text]:focus, select:focus, textarea:focus { border: 2px solid #f04646; outline: 0; }
input[type=radio], select { margin: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
img { display: block; width: 100%; height: auto; }
a:link, a:visited { color: #000; text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
/* ↑リセットCSS↑ */

#wrapper { overflow: hidden; width: 100%; max-width: 750px; min-width: 320px; margin-left: auto; margin-right: auto; }

/* TOP追従ボタン */
#pageTop { display: none; position: fixed; bottom: 20px; right: 30px; width: 95px; }

jquery

(function($){
	"use strict";
	var $pageTop = $("#pageTop");
	$(window).on("load", function(){
		var observer = new IntersectionObserver(function(entries) { 
			for(var i=0; i < entries.length; i++){
				if(entries[i].isIntersecting){
					$pageTop.css("transform","translateZ(0)").fadeOut(300,function(){$pageTop.css("transform","");});
				}else {
					$pageTop.css("transform","translateZ(0)").fadeIn(300,function(){$pageTop.css("transform","");});
				}
			}
		});
		observer.observe(document.querySelector('#fv'));
	});
	$('a[href^="#"]').click(function(){
		var href= $(this).attr("href");
		var target = $(href === "#" || href === "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, 500, "swing");
		return false; 
	});
	
})(jQuery);

x_x

2020/02/10 08:03

すでに position: fixed; となっているようですが、「ボタン位置固定」というのはどのような状態を指していますか？

astaraea_lagoon

2020/02/10 13:24

コメントいただきありがとうございます。質問事項の文脈を変更致しました。

行動規範の内容に同意します

回答1件

footerエリアとTOP追従ボタンが半分重なったらボタン位置固定に切り替えたい。

stickyを使った方がいいかもしれませんが、footer の高さが成り行きだと「きっちり半分」とはいかないでしょう。
position: sticky;の仕組みや実際の使い方をやさしく解説 | コリス

jqyeryでの動作を簡潔化したい。

addClass()でコントロールして、アニメーションはtransitionを使うといいかもしれません。
CSS transition : jQuery の addClass と removeClass で変化を付ければいい。いや、これが一番よさそうだ。 : GINPRO / SQLの窓と銀プログラマ

コメントを受けて追記

footerコンテンツ頭0px+ボタン画像半径分pxのような計算方法で実装できればと考えております。
sticky実装に関しては事情により避けております・・・。

それはそれは……心中お察しいたします。大変ですね。

であれば、IntersectionObserverでfooterのイベントも拾い、.page-topのCSSをposition: absolute; bottom: 000px;などとすればいいかと思います。
rootMarginをつけてやれば、それなりに見えるのではないでしょうか？
Intersection observer のオプション | Intersection Observer API - Web API | MDN

また、footerのheightなどが成り行きなら、JavaScriptの方で高さを取得するしかないでしょう。

投稿2020/02/10 09:47

編集2020/02/12 03:30

Lhankor_Mhy

総合スコア36981

astaraea_lagoon

2020/02/10 13:30

コメントいただき、ありがとうございます。質問事項の文脈を下記の通り変更致しました。・footerエリアとTOP追従ボタンが半分重なったらボタン位置固定に切り替えたい。 ↓ ・footerエリア頭部とTOP追従ボタン画像半分分が重なったらボタンはその位置から下にはスクロールしないようにさせたい。 footerコンテンツ頭0px+ボタン画像半径分pxのような計算方法で実装できればと考えております。 sticky実装に関しては事情により避けております・・・。