- 投稿日: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");
}
});