• 投稿日：2023年03月30日 10時55分35秒
  • 更新日：2023年03月30日 10時57分53秒

最初に

表題の通り

それに加えて、KVと被っているかどうかを判定してCSSを追加適用するJSも作ったので残しておく

HTML

                       
<div id="scroll-btn" class="btn scroll down">
	<div class="inner position-relative">
		<div class="background-box position-absolute">

		</div>
		<label class="text position-absolute">scroll</label>
	</div>
</div>

CSS

                       
#scroll-btn {
	position: fixed;
	/* 追従させる場合 */
	bottom: 0;
	right: 0;
	z-index: 100;

	font-family: var(--fontFamily-sub);
	font-size: small;

	width: 5em;
	height: 7em;
}

#scroll-btn .inner {
	width: 100%;
	height: 100%;
}

#scroll-btn .text {
	content: "scroll";
	top: 1em;
	right: 1em;
	color: var(--main-backcolor);
}

/* kvと被っているいない時 */
#scroll-btn .text:not(.suffer-kv)::first-letter {
	color: var(--main-color);
}

#scroll-btn .background-box {
	background-color: var(--sub-color01);
	width: 65%;
	height: 100%;
	top: 0;
	right: 0;
}

Javascript

                       
window.addEventListener("scroll", function(){

	// kv
	let domKv = document.querySelector("header .kv");
	var crKv = domKv .getBoundingClientRect() ;
	
	const kvTop = window.pageYOffset + crKv .top + domKv .clientHeight; // kvの末座標を取得

	// スクロールボタン
	let domScrollText = document.querySelector("#scroll-btn .text");
	var crScrollText = domScrollText.getBoundingClientRect() ;
	const scrollTextTop = window.pageYOffset + crScrollText.top + domScrollText.clientHeight; // scrollテキストの末座標を取得

	if(kvTop < scrollTextTop){ // scroll文字がKVにかぶっている
		domScrollText.classList.remove("suffer-kv");
	}else{
		domScrollText.classList.add("suffer-kv");
	}

});